Question

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

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(); });

Answer 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
});

<强>来源（S）

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

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

1 个答案: