單擊同級時，關閉下拉菜單

Question

我在嘗試進行這項工作時遇到了問題。

我有這個子菜單，當我單擊它的同級時，我想單擊它的同級ul。

我在這里進行了研究，並嘗試了一些無濟於事的事情。

這是我的代碼現在的樣子，切換正常工作：

if ( $(window).width() < 740) { 
        $('.submenu').click(function(e){
             e.stopPropagation();
            e.preventDefault();
            var el = (e.target || e.srcElement);
            var $this = $(this);

            $(el).siblings('ul').slideToggle();
            $(el).siblings('ul').addClass('activeState');
            if( $this.siblings().hasClass('activeState')){
                $this.slideUp();
            }
            $(el).find('span').toggleClass('bg-arrow-down bg-arrow-up');
        });
    }

這或多或少是我的HTML的樣子。 它具有各種子菜單，這些是我試圖使其工作的菜單。

<div class="panel panel-default">
            <!-- <div class="nav-item-container"> -->
                <div class="panel-heading head-category">
                    <div class="panel-title">
                        <span><a href="http://www.yahoo.com">Products</a></span>
                        <a data-toggle="collapse" href="#menuPanelListGroup">
                                <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
                <ul class="list-group collapse out" id="menuPanelListGroup">
                    <li class="list-group-item children-list-group">
                        <a data-toggle="collapse" href="#menuPanelSubListGroup">
                            <span>Item 1</span>
                            <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                        </a>

                        <ul id="menuPanelSubListGroup" class="collapse children-list-sublink">
                            <li class="list-group-item children-list-group">
                                <span><a href="#">SubItem 1</a></span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 2</span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 3</span>
                            </li>
                        </ul>

                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 2</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 3</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 4</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 5</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                </ul>
            <!-- </div> -->

            <!-- <div class="nav-item-container"> -->
                <div class="panel-heading head-category">
                    <div class="panel-title">
                        <span><a href="#">Latin Markets</a></span>              
                        <a data-toggle="collapse" href="#menu2PanelListGroup">
                            <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
                <ul class="list-group collapse out" id="menu2PanelListGroup">
                    <li class="list-group-item children-list-group">
                        <a data-toggle="collapse" href="#menu2PanelSubListGroup">
                            <span>Item 1</span>
                            <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                        </a>

                        <ul id="menu2PanelSubListGroup" class="collapse children-list-sublink">
                            <li class="list-group-item children-list-group">
                                <span><a href="#">SubItem 1</a></span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 2</span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 3</span>
                            </li>
                        </ul>

                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 2</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 3</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 4</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 5</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                </ul>
            <!-- </div> -->

            <!-- <div class="nav-item-container"> -->
                <div class="panel-heading head-category">
                    <div class="panel-title">
                        <span><a href="#">Shows</a></span>
                        <a data-toggle="collapse" href="#tradeshowPanelListGroup">
                                <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
                <ul class="list-group collapse out" id="tradeshowPanelListGroup">
                    <li class="list-group-item children-list-group">
                        <a data-toggle="collapse" href="#tradeshowPanelSubListGroup">
                            <span>Item 1</span>
                            <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                        </a>

                        <ul id="tradeshowPanelSubListGroup" class="collapse children-list-sublink">
                            <li class="list-group-item children-list-group">
                                <span><a href="#">SubItem 1</a></span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 2</span>
                            </li>
                            <li class="list-group-item children-list-group">
                                <span>SubItem 3</span>
                            </li>
                        </ul>

                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 2</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 3</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 4</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                    <li class="list-group-item children-list-group">
                        <span>Item 5</span>
                        <b class="pull-right glyphicon glyphicon-chevron-right"></b>
                    </li>
                </ul>

只是if語句不起作用。

Answer 1

不知道在哪里看不到發生這種情況-如果您將窗口寬度設為窗口寬度，則可能會或可能不會。 下面的代碼工作正常，我添加了maxWidth值，而不是硬編碼您正在使用的740。

我想問題是，您要完成什么？ 當寬度超過740時，是否需要設置其他樣式？ 也許您想看看CSS媒體類型？

因此，您詢問了有關切換類的問題。 問題是，向右/向下箭頭位於被單擊節點的后代上。 我已經做到了，請參閱下文。

 $(document).ready(function() { // set a default minimum width var minWidth = 740; // Is the viewport no wider than my min? if ($(window).width() < minWidth) { // If so, go ahead and hide all submenus var myMenu = $(".panel"); myMenu.find("li:has('ul')").on("click", function(evt) { // click on any LI that contains // nested UL's, show the child ul // and hide all of this LI's sibling's // children's nested ULs. evt.preventDefault(); evt.stopPropagation(); $(this).children("span") .toggleClass("glyphicon glyphicon--chevron-right") .toggleClass("glyphicon glyphicon-chevron-down"); $(this).children("ul").slideToggle(); $(this).siblings(":has(ul:visible)") .children("span") .toggleClass("glyphicon glyphicon--chevron-right") .toggleClass("glyphicon glyphicon-chevron-down"); $(this).siblings().find("ul:visible").slideUp(); }).prepend("<span class='glyphicon glyphicon-chevron-right'>").children("ul").hide(); // The above line actually hides all the nested // ULs initially. } }) 

 ul { list-style-type: none; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <!-- <div class="nav-item-container"> --> <ul> <li class="panel-title panel-heading head-category"> <span><a href="http://www.yahoo.com">Products</a></span> <a data-toggle="collapse" href="#menuPanelListGroup"> <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="list-group collapse out" id="menuPanelListGroup"> <li class="list-group-item children-list-group"> <a data-toggle="collapse" href="#menuPanelSubListGroup"> <span>Item 1</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </a> <ul id="menuPanelSubListGroup" class="collapse children-list-sublink"> <li class="list-group-item children-list-group"> <span><a href="#">SubItem 1</a></span> </li> <li class="list-group-item children-list-group"> <span>SubItem 2</span> </li> <li class="list-group-item children-list-group"> <span>SubItem 3</span> </li> </ul> </li> <li class="list-group-item children-list-group"> <span>Item 2</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 3</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 4</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 5</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> </ul> <!-- </div> --> </li> <li class="panel-title panel-heading head-category"> <span><a href="#">Latin Markets</a></span> <a data-toggle="collapse" href="#menu2PanelListGroup"> <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="list-group collapse out" id="menu2PanelListGroup"> <li class="list-group-item children-list-group"> <a data-toggle="collapse" href="#menu2PanelSubListGroup"> <span>Item 1</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </a> <ul id="menu2PanelSubListGroup" class="collapse children-list-sublink"> <li class="list-group-item children-list-group"> <span><a href="#">SubItem 1</a></span> </li> <li class="list-group-item children-list-group"> <span>SubItem 2</span> </li> <li class="list-group-item children-list-group"> <span>SubItem 3</span> </li> </ul> </li> <li class="list-group-item children-list-group"> <span>Item 2</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 3</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 4</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 5</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> </ul> <!-- </div> --> </li> <li class="panel-title panel-heading head-category"> <span><a href="#">Shows</a></span> <a data-toggle="collapse" href="#tradeshowPanelListGroup"> <i class="pull-right fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="list-group collapse out" id="tradeshowPanelListGroup"> <li class="list-group-item children-list-group"> <a data-toggle="collapse" href="#tradeshowPanelSubListGroup"> <span>Item 1</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </a> <ul id="tradeshowPanelSubListGroup" class="collapse children-list-sublink"> <li class="list-group-item children-list-group"> <span><a href="#">SubItem 1</a></span> </li> <li class="list-group-item children-list-group"> <span>SubItem 2</span> </li> <li class="list-group-item children-list-group"> <span>SubItem 3</span> </li> </ul> </li> <li class="list-group-item children-list-group"> <span>Item 2</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 3</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 4</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item children-list-group"> <span>Item 5</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> </ul> </li> </ul> </div>