jQuery附加到此

z5btuh9x 于 2023-03-01 发布在 jQuery

关注(0)|答案(1)|浏览(126)

我尝试在一个click函数中向this追加一些东西。基本上，在click函数中，我希望将一些东西作为目标并将其追加到我所单击的元素中。这就是我目前所做的。

jQuery(".pop-up-menu-left ul .menu-item-has-children").click(function(){
    jQuery("#sub-menu-container").find(".sub-menu").appendTo(this);
});

以下是单击前的HTML：

<div class="pop-up-menu-left">
     <ul>
          <li><a>item</a></li>
          <li class="menu-item-has-children"><a>item</a></li>
          <li><a>item</a></li>
     </ul>
</div>

<div class="pop-up-menu-right">
     <div id="sub-menu-container">
          <ul class="sub-menu">
              <li><a>item</a></li>
              <li><a>item</a></li>
          </ul>
     </div>
</div>

这里是我想要的HTML看起来像点击后：

<div class="pop-up-menu-left">
     <ul>
          <li><a>item</a></li>
          <li class="menu-item-has-children">
             <a>item</a>
             <ul class="sub-menu">
                  <li>item</li>
                  <li>item</li>
              </ul>
          </li>
          <li><a>item</a></li>
     </ul>
</div>

<div class="pop-up-menu-right">
     <div id="sub-menu-container">
          
     </div>
</div>

这可能吗？

jquery

来源：https://stackoverflow.com/questions/46962623/jquery-append-to-this

1条答案

按热度按时间

vngu2lb81#

一个问题是 * 如果一个人点击了不止一次怎么办 *-你显然想防止那个子菜单被追加不止一次：

jQuery(function($) { // DOM ready and $ alias secured

  var $sub = $("#sub-menu-container").find(".sub-menu");

  $(".pop-up-menu-left .menu-item-has-children").on("click", function(e) {
    e.preventDefault(); // prevent browser default behavior
    
    if( ! $(this).has($sub).length ) { // Append only if missing
      $(this).append($sub);
    }
  });

});

[class^=pop-up-menu]{margin:10px; background: #ddd;}

<div class="pop-up-menu-left">
  <ul>
    <li><a>item</a></li>
    <li class="menu-item-has-children"><a>CLICK ME</a></li>
    <li><a>item</a></li>
  </ul>
</div>

<div class="pop-up-menu-right">
  <div id="sub-menu-container">
    <ul class="sub-menu">
      <li><a>item</a></li>
      <li><a>item</a></li>
    </ul>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

赞(0）回复(0）举报 2023-03-01

我来回答

jQuery附加到此

1条答案

相关问题

热门标签

最新问答