您好我需要帮助在点击功能上向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>
这可能吗?谢谢!
答案 0 :(得分: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>