用于触摸设备的 jQuery 下拉导航。单击另一个菜单项时无法隐藏菜单项

Question

我正在使用 jQuery 为触摸设备创建下拉导航。在点击菜单项标题和在导航之外点击时，我已经能够隐藏下拉菜单，但是，在点击另一个下拉菜单项标题时，我无法隐藏下拉菜单。两者都保持打开状态，直到我在导航之外单击或再次单击菜单项标题。

这是脚本：

<script type="text/javascript">
        $(document).ready(function(){
            $(".toggle_container").addClass("hidden");
            $("li#more").click(function(){
                if ($(this).children("ul.toggle_container").hasClass("hidden"))
                    $("ul.toggle_container").toggleClass("hidden");             
                else{
                    $("ul.toggle_container").toggleClass("hidden");
                }
            return false;
            })
            $("li#search").click(function(){
                if ($(this).children("div.toggle_container").hasClass("hidden"))
                    $("div.toggle_container").toggleClass("hidden");
                else{
                    $("div.toggle_container").toggleClass("hidden");
                }
            return false;
            });
            $("li.trigger").click(function(){
                $(this).toggleClass("clicked");
            });
            $(".toggle_container").click(function(e) {
                e.stopPropagation();
            });
            $(document).click(function() {
                $(".toggle_container").addClass("hidden");
                $("li.trigger").removeClass("clicked");
            });
        });
    </script>

这是标记：

<nav id="navbar">
        <ul>
            <li id="home"><a href="/mobile/index.html">&nbsp;</a></li>
            <li><a href="#">Item 1</a></li>
            <li id="more" class="trigger"><a href="#">More</a>
                <ul class="toggle_container">
                    <li><a href="#">subitem1</a></li>
                    <li><a href="#">subitem2</a></li>
                    <li><a href="#">subitem3</a></li>
                    <li><a href="#">subitem4</a></li>
                    <li><a href="#">subitem5</a></li>
                    <li><a href="#">subitem6</a></li>
                </ul>
            </li>
            <li id="search" class="trigger"><a href="#">&nbsp;</a> 
                    <div id="nav-search-box" class="toggle_container">
                        <div class="search_box">
                            <form class="search_form" name=gs action="http://www.google.com">
                                <input id=q maxlength=256 title="Enter search query" alt=Query name=q>
                                <input type=hidden name=btnG id=gs value=Search class=bt>
                                <input type=hidden name=btnG.x value=0>
                                <input type=hidden name=btnG.y value=0>
                                <input type=hidden name=oe value=UTF-8>
                                <input type=hidden name=ie value=UTF-8>
                                <input type=hidden name=entqr value=3>
                                <input type=hidden name=ud value=1>
                                <input type=hidden name=sort value=date:D:L:d1>
                                <input type=hidden name=output value=xml_no_dtd>
                                <input type=hidden name=lr value=lang_en>
                                <input type=hidden name=client value=google>
                                <input type=hidden name=proxystylesheet value=google>
                                <input type=hidden name=x value=0>
                                <input type=hidden name=y value=0>
                                <input type=hidden name=proxyreload value=1>
                                <input type=hidden name=entsp value=0>
                                <input type=hidden name=site value=google>
                            </form>
                        </div>
                    </div>
            </li>
        </ul>
    </nav>

我也愿意接受有关如何改进脚本的任何建议。感谢观看。

Answer 1

试试这个修改：

$("li.trigger").click(function(){
    $("li.trigger").removeClass("clicked");
    $(this).addClass("clicked");
});

这应该与单击文档时的行为相同，但保持单击的 li 处于启用状态。然后，我将删除所有将“隐藏”类分配给toggle_container 的东西，而是使用 CSS 来控制它。例如，如果“隐藏”类只设置 display:none 我会有这样的 CSS：

.toggle_container {display:none;}
.clicked .toggle_container {display:block;}

希望有帮助！