jQuery 切换——我做错了什么？

Question

I'm trying to get this to work but it doesn't want to: http://jsfiddle.net/b9ecoefy/1/

Basically I'd like the DIV to show when the li > h4 > a is clicked

 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'); won't work because .find() looks at descendants and you want the sibling, so use .next() instead.

 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>