javascript - 不适用于最新的 jquery 版本

Question

为什么此代码在最新版本的 jQuery 中不起作用？

    $('.head').click(function(){
         if($(this).next('#list').hasClass('block')){
      	     $(this).next('#list').removeClass('block');
         }
      	 else{
    	     $(this).parent().find('#list').removeClass('block');
         	 $(this).next().addClass('block');
      	 }
    });

#list{
  display:none;
}

.head{
  border: 1px solid #e6dfdf;
  background: #efdbdb;
  padding:5px;
  margin:5px 0;
}
#menu{
  display:inline-block;
}
.block{
  display:block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="menu">
  <div class="head" >head1</div>
  <ul id="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
  <div class="head" >head2</div>
    <ul id="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <div class="head" >head3</div>
      <ul id="list">
        <li>
            <div class="head" >head3</div>
            <ul id="list">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
            </ul>
        </li>
        <li>item2</li>
        <li>item3</li>
      </ul>
    </div>

这是问题:https://jsfiddle.net/silpajacob449/y39wk6mn/

Answer 1

id是唯一标识，尝试将#list改为.list