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启用时的行为方式相同。然后我会删除所有为'{1}}分配'隐藏'类的东西，而是使用CSS来控制它。例如，如果'hidden'类只设置toggle_container，我会像这样使用CSS：

display:none

希望有所帮助！

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

1 个答案: