jQuery drop-down nav for touch devices. Can't hide menu item when clicking another menu item

I'm creating a drop-down nav for touch devices with jQuery. I've been able to hide drop downs when tapping menu item title and when tapping outside the nav, however, I cannot hide a drop-down when tapping on another drop-down menu item title. Both stay open until I click outside the nav or click the menu item titles again.

Here's the script:

<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>

And here's the markup:

<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>

I'm also open to any suggestions about how to improve the script. Thanks for looking.

Try this modification:

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

This should then act the same way as when you click onto the document but keep the clicked li enabled. I would then remove all the stuff assigning a 'hidden' class to the toggle_container and instead use CSS to control this. For instance, if the 'hidden' class just sets display:none I would have CSS like so:

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

Hope that helps!