分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 单击Jquery打开和关闭子菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个主菜单,将在 jquery中显示带有click事件的子菜单(客户端想要点击而不是悬停)所以我得到它工作但我仍然无法找出一件事：我有菜单和子菜单正常工作所以当我点击“新闻”时,子菜单很好地向下滑动,当我点击“新闻”时,它会关闭,但是如果在打开新闻’子菜单后我点击“资源”,则会出现相应的子菜单,但新闻’子菜单保持打开状态,我希望在点击另一个菜单项或主菜单区域外的任何想法时关闭前一个子菜单？这是我得到的：

<ul id="MainMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li>
              <a href="#">News</a>
              <ul class="noJS">
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
                <li><a href="#">sub menu 3</a></li>
                <li><a href="#">sub menu 4</a></li>
                <li><a href="#">sub menu 5</a></li>
                <li><a href="#">sub menu 6</a></li>
            </ul>                         
        </li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Admin</a></li>
        <li>
            <a href="#">resources</a>
            <ul class="noJS">
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
                <li><a href="#">sub menu 3</a></li>
                <li><a href="#">sub menu 4</a></li>
                <li><a href="#">sub menu 5</a></li>
                <li><a href="#">sub menu 6</a></li>
            </ul>
        </li>
        <li class="lastChild"><a href="#">New Button</a></li>
    </ul>

和jquery：

$(function(){
$('#MainMenu').find('> li').click(function(){
    $(this).find('ul')
    .stop(true,truE).slideToggle(400); 
    return false;       
});    
});

解决方法

尝试这样的事情

$(function() {
    $('#MainMenu > li').click(function(E) { // limit click to children of mainmenue
        var $el = $('ul',this); // element to toggle
        $('#MainMenu > li > ul').not($el).slideUp(); // slide up other elements
        $el.stop(true,truE).slideToggle(400); // toggle element
        return false;
    });
    $('#MainMenu > li > ul > li').click(function(E) {
        e.stopPropagation();  // stop events from bubbling from sub menu clicks
    });
});