我有以下代码它需要一个<ul>
单击时它会下拉内容。效果很好。问题是当 child
时它也会关闭相同类型的其他菜单。 <li>
被点击了。
我使用 if
解决了这个问题子句来确定被单击的项目是否也是当前打开的项目,但我想更进一步,使它如果 parent ul
点击再次,它会关闭菜单。我对如何处理这个问题有很多误解。我试图阻止子元素的传播,但它产生了相同的结果。有人可以帮忙吗?
接线(文件加载)
$(document).ready(function () {
$('[data-role="sidebar-dropdown"]').drawer({
open: 'sidebar-dropdown-open',
css: '.sidebar-dropdown-open'
});
});
html
<ul>
<li class=" dropdown" data-role="sidebar-dropdown">
<a href="pages/.." class="remote">Link Text</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li><a class="remote" href="pages/...">Link Text</a></li>
<li><a class="remote" href="pages/...">Link Text</a></li>
<li><a class="remote" href="pages/...">Link Text</a></li>
</ul>
</li>
</ul>
JavaScript
(function ($) {
$.fn.drawer = function (options) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend({
open: 'open',
css: '.open'
}, options);
return this.each(function () {
$(this).on('click', function (e) {
// slide up all open dropdown menus
$(settings.css).not($(this)).each(function () {
$(this).removeClass(settings.open);
// retrieve the appropriate menu item
var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
// slide down the one clicked on.
$menu.slideUp('fast');
$menu.removeClass('active');
});
// mark this menu as open
$(this).addClass(settings.open);
// retrieve the appropriate menu item
var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
// slide down the one clicked on.
$menu.slideDown(100);
$menu.addClass('active');
e.preventDefault();
e.stopPropagation();
}).on("mouseleave", function () {
$(this).children(".dropdown-menu").hide().delay(300);
});
})
};
})(jQuery);
最佳答案
在 jQuery 事件中,您可以通过引用 e.target
来读取发起事件的节点。
if ($(e.target).is("li")) { // do something only if the clicked element was a li }
关于关闭不是子元素的元素,与其使用全局选择器 $(selector)
,不如使用相对于初始 dom 节点的选择器。传递 this
并将其存储在您的 jQuery 插件中是一种常见的做法。
return this.each(function(this)) { var $node = $(this); }
然后所有查找将像这样完成
$node.find(selector).doStuff()
关于javascript - stopPropagation() 的行为更令人困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13732076/