jQuery Toggle - Neyi yanlış yapıyorum?

Question

Ben bu işe almaya çalışıyorum ama hiç o istemiyor: Ben li > h4 > a tıklandığında göstermek DIV istiyorum Temelde http://jsfiddle.net/b9ecoefy/1/

jQuery(document).ready(function($) { 
 
    $('.item div').hide(); 
 
    $('.item a').click(function(e) { 
 
    e.preventDefault(); 
 
    // hide all divs 
 
    var $this = $(this).parent().find('div'); 
 
    $(".item div").not($this).hide(); 
 
    // toggle 
 
    $this.toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<ul> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="type"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h4><a href="#">Test</a></h4> 
 
    </li> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="date"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="type"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

$(this).parent().find('div'); çalışmayacaktır çünkü .find() soyundan görünüyor ve kardeş istiyorsanız, bu yüzden .next() kullanın.

jQuery(document).ready(function($) { 
 
    $('.item div').hide(); 
 
    $('.item h4 a').click(function(e) { 
 
    e.preventDefault(); 
 
    // hide all divs 
 
    var $this = $(this).parent().next('div'); 
 
    $(".item div").not($this).hide(); 
 
    // toggle 
 
    $this.toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<ul> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="type"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h4><a href="#">Test</a></h4> 
 
    </li> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="date"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li class="item"> 
 
    <h4><a href="javascript:void(0)">Test</a></h4> 
 
    <div class="type"> 
 
     <ul> 
 
     <li><a href="#">Test</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>