jQuery Toggle - 我做错了什么？

Question

我试图让它发挥作用，但它并不想：http://jsfiddle.net/b9ecoefy/1/

基本上我希望DIV显示何时点击li > h4 > a

＆＃13;

＆＃13;

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();
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(this).parent().find('div');无效，因为.find()会查看后代并且您想要兄弟，所以请改用.next()。

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>