階層要素のJqueryコードがループ内の特定の値に対して機能しない

Question

jqueryを使用して操作されているサイドバーのドロップダウンメニューがありますが、ユーザーが項目をクリックするとページが更新され、メニューが折りたたまれます。これを解決するには、それを拡張しておくことです。REQUEST_URIとメニュー項目のURLを比較することにしました。見つかった場合、私はclickイベントをトリガーします。これを達成するために、スナップを使用しました。

$("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click"); 

メニュー項目リストの最後の3番目に表示される特定の項目を除くすべての項目に適用されます。任意のヘルプをいただければ幸いです

<nav class="navbar navbar-default sidebar" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button>  
     </div> 
     <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
     <ul class="nav navbar-nav asurion-sidebar" > 
      <?php 
      $nav_menu_items = wp_get_nav_menu_items('left-sidebar'); 
      $menu_items = wpse170033_nav_menu_object_tree($nav_menu_items); 
      $parents = get_post_ancestors($post->ID); 



      foreach($menu_items as $items) 
      { 

       $parents1 = get_post_ancestors($items->ID); 

       if(count($items->children) > 0) 
       { 

       ?> 
       <li class="dropdown first-level"> 
        <a href="#" class="dropdown-toggle " data-toggle="dropdown"><i class="fa <?php echo $items->classes[0];?>" aria-hidden="true"></i><?php echo $items->post_title;?> <i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i></a> 
        <ul class="dropdown-menu forAnimate" role="menu"> 
        <?php 
         foreach($items->children as $citems) 
         { 
         if(count($citems->children) > 0) 
         {?> 
          <li class="dropdown thirdlevel "> 
          <a style="cursor:pointer" class="dropdown-toggle naveen" data-toggle="dropdown-submenu"><i class="fa <?php echo $citems->classes[0];?>" aria-hidden="true"></i><?php echo $citems->post_title;?><i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i></a> 
           <ul class="dropdown-submenu forAnimate lastlevel" role="menu">  
           <?php 
           foreach($citems->children as $ccitems) 
           { 
            if(strpos($ccitems->url,'localhost')){ 
             $sea_domain = 'localhost'; 
            }elseif(strpos($ccitems->url,'asurion.com')){ 
             $sea_domain = 'asurion.com'; 
            } 
            $compareUrl = explode($sea_domain,$ccitems->url) ;      
              if($_SERVER['REQUEST_URI'] == $compareUrl[1]){ 
            ?> 
            <script> 
            $(document).ready(function(){ 
            $("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click"); 
            }); 
            </script> 
            <?php } 
            echo "<li><a target='".$ccitems->target."' href='".$ccitems->url."'>".$ccitems->post_title."</a></li>"; 
           } 
           ?> 
           </ul> 
          </li> 
         <?php 
         } 
         else 
         { 
         if(strpos($citems->url,'localhost')){ 
           $sea_domain = 'localhost'; 
          }elseif(strpos($citems->url,'asurion.com')){ 
           $sea_domain = 'asurion.com'; 
          } 
          $compareUrl = explode($sea_domain,$citems->url);   
          echo "<li><a target='".$citems->target."' href='".$citems->url."'>".$citems->post_title."</a></li>"; 
          if($_SERVER['REQUEST_URI'] == $compareUrl[1]){ 
           ?> 
           <script> 
           $(document).ready(function(){ 
           $("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click"); 
          }); 
         </script><?php 
         } 
         } 
         } 
        ?> 
        </ul> 
       </li> 
       <?php 
       } 
       else 
       { 
       if(get_the_title($post->ID)=="Dashboard" && $items->post_title=="Home" && count($parents)==0) 
       { 
        echo "<li class='active'><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>"; 
       } 
       else 
       { 
        echo "<li><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>"; 
       } 

       } 
      } 

      ?> 
     </ul> 
     </div> 
     </div> 
    </nav> 

：以下は、私はここで私が問題に直面しています実行していたコードです。ここで

は、サイドバーのメニューのために反復された配列です：Array、ここでは、アレイ内のjQueryのスニペットが失敗された項目の一つは、「デバイス」の下にある>「電話シミュレータ」

これは、ソースからExtracted HTML codeですコード（フィドルdoesntのは、上記のスクロール、JSコードを見つけるために、JSコードはHTMLセクションにwrittentすることを可能にするようそれはjsのコードが含まれているdoesntの）

Answer 1

私はその理由を出力

<script> 
           $(document).ready(function(){ 
           $("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click"); 
           }); 
           </script> 

を想像することはできませんループ、それはあなたのHTMLコードが乱雑に見えるようになります。それほど多くの文字を出力しないでください。$(document).ready(...)

<A />に 'xxx'のような特別なclassNameを指定して、</body>の前にスクリプトコードを出力することができます。

<script> 
           $(document).ready(function(){ 
           $("a.xxx").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click"); 
           }); 
           </script> 

少し上手です。

メニューのステータスを保持する場合は、この方法ではなく、cookieまたはlocalStorageを使用する必要があります。

とjsfiddleはあなたのHTML、CSS、jsコードを分けてほしいですが、あなたのやり方では、あなたのHTMLとjsを分けることはできません。あなたはいくつかのCSSを提供することができますjsfiddle結果ページを見栄え、それは誰かがあなたの構造を理解するのに役立ちます。