Jquery 如何在第二次单击后激活我的特定父菜单链接

我不确定是否有更好的方法，但我有一种情况，我必须单击父菜单导航链接以显示该父链接的下拉子链接，然后父链接将变为可供单击以转到特定页面。当我在父链接及其子链接选项之外单击时，下拉菜单再次关闭。所有这些都很棒

这是我到目前为止所拥有的

var mtargetmenusection = $('#menu-top > ul > li');

mtargetmenusection.one('click', function(e){
e.stopPropagation();
e.preventDefault();
var mthis = $(this);
if(mthis.find('div[class^="dropdown"]').length != 0) {
mthis.find('div[class^="dropdown"]').stop(true,true).css({display:'none'}).slideDown(150);
}       
});

$(document).click(function(e){
$(".dropdown").fadeOut(50);
});

因此，根据这段代码，如果我已经从菜单导航中单击了一个父链接，然后在菜单导航中单击了另一个父链接，那么该单击如何告知我首先单击的上一个父链接不是活动链接，而是默认只打开它自己的下拉菜单

---

谢谢

你把事情复杂化了。你不需要。一，你也不需要知道元素是否存在来滑动切换它

var mtargetmenusection = $('#menu-top > ul > li');

mtargetmenusection.on('click', function (e) {
    e.preventDefault();
    var mthis = $(this);
    mthis.find('div[class^="dropdown"]').stop(true, true).slideToggle(150);
});

$(document).click(function (e) {
    $target = $(e.target);
    if ($target.is("#menu-top > ul > li")) {
        // only hide siblings of the clicked li
        $target.siblings().children(".dropdown").fadeOut(50);
    } else {
        // hide them all
        $(".dropdown").fadeOut(50);
    }
});

---

不同之处在于，单击一个li只会与该li交互，然后不会阻止事件冒泡。然后，当事件到达文档时，文档处理隐藏其他不相关的下拉列表，或者如果单击的元素不是lis中的一个，则隐藏所有下拉列表。

谢谢。你的代码启发我深入研究如何解决我的问题。根据下面的代码，我采用以下方法：

首先用jQuery取消默认的CSS悬停效果 然后使用on方法检测是否显示下拉菜单，然后确定如何使用preventDefault。 最后，如果单击文档中的任意位置，则隐藏所有下拉菜单。 。下面是代码：

HTML：

<div id="menu-top" class="jq-off">
<ul>
<li>
<a href="http://www.google.com"><span>About</span></a> 
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>

<li>
<a href="http://yahoo.com"><span>Join</span></a>
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>
</ul>
</div>

jQuery：

function menu() {
//disable the default css hover action
$('#menu-top').removeClass('jq-off');

$('#menu-top > ul > li').on('click', function (e) {
    e.stopPropagation();
    var mthis = $(this);    
    var mparentdropdown = mthis.find('.dropdown');

    //prevent default link action for this parent link if this dropdown is hidden
    if (mparentdropdown.is(':hidden')) { 
        e.preventDefault(); 
    }

    //if a dropdown is hidden on click, then hide all other dropdowns and slide down this dropdown
    if(mparentdropdown.css("display") == "none"){
        $(".dropdown").fadeOut(50);
        mparentdropdown.stop(true,true).css({display:'none'}).slideDown(150, function(){ });     
    }
});

//click anywhere in the document to close all dropdown menus
$(document).click(function(e){
    $(".dropdown").fadeOut(50);
});
}

(function($) {
menu();
})(jQuery);

function menu() {
//disable the default css hover action
$('#menu-top').removeClass('jq-off');

$('#menu-top > ul > li').on('click', function (e) {
    e.stopPropagation();
    var mthis = $(this);    
    var mparentdropdown = mthis.find('.dropdown');

    //prevent default link action for this parent link if this dropdown is hidden
    if (mparentdropdown.is(':hidden')) { 
        e.preventDefault(); 
    }

    //if a dropdown is hidden on click, then hide all other dropdowns and slide down this dropdown
    if(mparentdropdown.css("display") == "none"){
        $(".dropdown").fadeOut(50);
        mparentdropdown.stop(true,true).css({display:'none'}).slideDown(150, function(){ });     
    }
});

//click anywhere in the document to close all dropdown menus
$(document).click(function(e){
    $(".dropdown").fadeOut(50);
});
}

(function($) {
menu();
})(jQuery);