Выпадающая навигация jQuery для сенсорных устройств. Невозможно скрыть пункт меню при нажатии на другой пункт меню

Я создаю раскрывающуюся навигацию для сенсорных устройств с помощью 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>

Я также открыт для любых предложений по улучшению сценария. Спасибо, что посмотрели.


javascript navigation touch jquery
person user981023    schedule 05.10.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте эту модификацию:

$("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;}

Надеюсь, это поможет!

person Stuart Burrows    schedule 05.10.2011
comment
@Inrbob спасибо за ваше предложение. На самом деле я только что нашел ваш ответ на вопрос другого пользователя, который похож на мой ссылка. Вот страница, над которой я работаю, ссылка. Когда я попробовал ваше предложение, он удалил класс clicked, который используется только для стиля. Я думаю, что мне действительно нужно сделать, это добавить .hidden к родному брату, когда его родной брат выбран, но я еще не понял, как это сделать. Еще раз спасибо, что посмотрели этот пост... - person user981023; 06.10.2011
comment
Круто, надеюсь поможет. Я смоделировал то, что пытался получить в этом ответе здесь: jsfiddle.net/EjFxH. Сделал несколько изменений, и, надеюсь, это либо просто сработает для вас, либо немного поможет вам. Обратите внимание, что я только что добавил немного CSS в конце вашего, а не редактировал блок за блоком. - person Stuart Burrows; 06.10.2011
comment
Большое спасибо, Инрбоб! Это работает отлично, и это намного проще и чище, чем то, что у меня было раньше. Мне особенно нравится бит not(this).removeClass. Это пригодится позже. Спасибо еще раз! - person user981023; 06.10.2011