当打开一个下拉菜单时关闭另一个

Posted

技术标签:

【中文标题】当打开一个下拉菜单时关闭另一个【英文标题】:When one dropdown is opened close another 【发布时间】:2013-04-11 09:43:02 【问题描述】:

我有 2 个用于移动响应网站的下拉菜单,一个用于博客类别,另一个用于下拉搜索框。这些工作正常,但是当你打开一个时,另一个看起来有点乱。我一直在寻找一些东西,当一个打开并且用户点击打开另一个时,听出来并关闭它。我进行了一项研究,发现大多数函数都使用“父”和“子”,但不确定它如何应用于我的 sn-p 代码。我也考虑过删除课程,但似乎没有任何效果。如果有人对我的问题有任何建议,我将不胜感激。

html

<div id="nav-mobile-responsive"><!--Mobile Navigation-->
        <div class="categories-mobile-responsive">
            <ul id="nav-1">
                <li>
                  <h3></h3>
                    <ul>
                        <?php wp_list_categories('&title_li=') ?>
                    </ul>
                </li> 
           </ul>        
        </div> 
        <div class="searchbar-mobile-responsive">
            <ul id="nav-2">
                <li><h3></h3>
                    <ul>
                        <form method="get" id="searchform-mobile" action="<?php echo home_url( '/' ); ?>">
                        <div id="search-inputs">
                        <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" />
                        <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>">
                        </div>
                        </form>
                    </ul>
                </li> 
           </ul>        
        </div> 
    </div>  

javascript 来切换移动和小屏幕的下拉菜单:

$('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function()
                $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();
            );

$("#searchform-mobile").click(function(event) event.stopPropagation(); );

【问题讨论】:

【参考方案1】:

$(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle(); 之前,只需向上滑动所有其他下拉菜单。

$('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function()
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();
);

额外:一些代码是不必要的,可以优化(除非你没有提供整个 HTML 结构 - 在这种情况下,这可能会破坏它):

$('nav-mobile-responsive div').click(function() //only one selector
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul ul').slideToggle(); //only call .find() once
);

来源

jQuery API - .slideUp()jQuery API - .siblings()

【讨论】:

应该是 $('#nav-mobile-responsive ul ul').slideUp().not(this);因为 nav-mobile-responsive 是 ID 而不是类。除此之外,很好的答案,但它不会让你隐藏已经打开的菜单。 谢谢你是对的 - 我已经编辑过了。这将隐藏所有打开的菜单,除了被点击的菜单 这很好用,但我唯一的问题是当幻灯片打开时我想单击并关闭它,所以没有打开它,它会滑回来。,厚颜无耻的事情! 啊,抱歉 - 我有点超前了,认为 this 是被切换的元素。请参阅上面的修订版 - 更简单且有效! ;) 那太好了,谢谢!就像我理解的那样,它采用每个下拉菜单的类,监听每个下拉菜单的点击事件,当它被点击时,另一个的兄弟姐妹向上滑动并找到 ul 点击并向下滑动?我想知道我在做什么并正确理解它,对不起,如果我有点慢,我只做沼泽标准 jQuery!感谢您的帮助。

以上是关于当打开一个下拉菜单时关闭另一个的主要内容,如果未能解决你的问题,请参考以下文章

打开另一个导航下拉菜单时不关闭

多级下拉引导

Bootstrap 下拉菜单在悬停时关闭

Bootstrap 导航栏,新的下拉菜单不会关闭移动视图中已打开的下拉菜单

当用户在菜单外单击时,如何关闭 Bootstrap 导航栏下拉菜单?

单击时菜单不切换(关闭)