JQuery раскрывающийся список навигации для сенсорных устройств.Не удается скрыть пункт меню при нажатии другого пункта меню - PullRequest
Новая
       15

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

0 голосов
/ 05 октября 2011

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

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

1 Ответ

0 голосов
/ 06 октября 2011

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

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

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

...