Question

您好我需要帮助在点击功能上向this添加内容。基本上点击，我想要定位的东西，并将其附加到我点击的元素。这就是我到目前为止所拥有的。

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>

这可能吗？谢谢！

Answer 1

一个问题是如果多次点击一次 - 你显然想要防止该子菜单多次被追加：

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>

jQuery附加到此

1 个答案: