この親ではないdivを切り替える

Question

私は自分のウェブサイトのドロップダウンメニューを作成しており、jQueryのslideToggleを使っています。ナビゲーションの各カテゴリ（navparentがクリックされたとき、navhildがトグルするとき）でそれを動作させますが、他の親をクリックすると前の子divが開いたままになります。親がクリックされたときに他のdivを閉じたいと思います。

jQuery(document).ready(function($) { 
$('.navparent a').click(function(){ 
$(this).parent().find('.navchild').slideToggle(90);  

---

  <div class="navmobile"> 
       <div class="navparent"> 
        <a href="#"> 
         <img src="/source.png" alt="Parent" title="Parent" /> 
         <br />Parent 
        </a> 
        <div class="navchild"> 
         <ul> <li><a href="#">Child</a></li></ul> 
        </div> 
       </div> 
       <div class="navparent"> 
        <a href="#"> 
         <img src="/source.png" alt="Parent" title="Parent" /> 
         <br /> Parent 
        </a> 
        <div class="navchild"> 
         <ul> <li><a href="#">Child</a></li></ul> 
        </div> 
       </div> 


     </div> 

Answer 1

その後、クリックのための1つが開き、ちょうどすべての.navchildの要素を非表示にするには、行を追加することができます。

jQuery(document).ready(function($) { 
 
     $('.navchild').hide(); 
 
     $('.navparent a').click(function(){ 
 
    $(this).parent().find('.navchild').slideToggle(90); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div class="navmobile"> 
 
       <div class="navparent"> 
 
        <a href="#"> 
 
         <img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" /> 
 
         <br /> MY LIBRARY 
 
        </a> 
 
        <div class="navchild"> 
 
         <ul> {{ page.main_navigation }}<li><a href="#">testestsetsetestsetsetsetsetsetes</a></li></ul> 
 
        </div> 
 
       </div> 
 
       <div class="navparent"> 
 
        <a href="#"> 
 
         <img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" /> 
 
         <br /> MY LIBRARY 
 
        </a> 
 
        <div class="navchild"> 
 
         <ul> {{ page.main_navigation }}<li><a href="#">testestsetsetestsetsetsetsetsetes</a></li></ul> 
 
        </div> 
 
       </div> 
 

 

 
     </div>

それともCSSではデフォルトで非表示に.navchild要素を設定することができます。 （これを処理するより効率的な方法です）。

jQuery(document).ready(function($) { 
 
     $('.navparent a').click(function(){ 
 
    $(this).parent().find('.navchild').slideToggle(90); 
 
    }); 
 
    });

.navchild { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div class="navmobile"> 
 
       <div class="navparent"> 
 
        <a href="#"> 
 
         <img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" /> 
 
         <br /> MY LIBRARY 
 
        </a> 
 
        <div class="navchild"> 
 
         <ul> {{ page.main_navigation }}<li><a href="#">testestsetsetestsetsetsetsetsetes</a></li></ul> 
 
        </div> 
 
       </div> 
 
       <div class="navparent"> 
 
        <a href="#"> 
 
         <img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" /> 
 
         <br /> MY LIBRARY 
 
        </a> 
 
        <div class="navchild"> 
 
         <ul> {{ page.main_navigation }}<li><a href="#">testestsetsetestsetsetsetsetsetes</a></li></ul> 
 
        </div> 
 
       </div> 
 

 

 
     </div>

.navchild { display: none; } 

Answer 2

親をクリックしたときにあなたは、単にすべての子divを非表示にすることができます。

$('.navmobile').find('.navchild').hide() 

Answer 3

あなたがのparentNodeをクリックすると、jQueryが切り替え1以外の子ノードのすべてを隠しています

jQuery(document).ready(function($) { 
    $('.navchild').slideToggle(90); 

    $('.navparent a').click(function(e) { 
     e.preventDefault(); 
     // determine what div is open 
     var $this = $(this).parent().find('div'); 
     // hide all divs except this one 
     $(".navparent div").not($this).hide(); 

     // toggle selected div 
     $this.slideToggle(90); 

    }); 
}); 

作業フィドル：http://jsfiddle.net/iamthejonsmith/BGSyS/900/