兄弟をクリックするとドロップダウンメニューが表示されます

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

ウィンドウの幅をウィンドウの幅にする場合は、ウィンドウの幅をウィンドウの幅とみなしている場合としない場合があります。下記のコードは正常に動作しています。使用していた740をハードコーディングするのではなく、maxWidthの値を追加しました。

質問は、あなたは何を達成しようとしているのでしょうか？幅が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>