jQuery多个div幻灯片在ul li内部切换

Question

我在ul li内有多个div

<div>
  <ul>
    <li>
      <div id="flip" class="manage-image-container">
        <a href="#">
          <img src="/files/images/icns/settings-1.svg" alt="">
        </a>
        <h4>TEST</h4>
      </div>
    </li>
    <li>
      <div id="flip" class="manage-image-container">
        <a href="#">
          <img src="/files/images/icns/settings-1.svg" alt="">
        </a>
        <h4>TEST</h4>
      </div>
    </li>
    <li>
      <div id="flip" class="manage-image-container">
        <a href="#">
          <img src="/files/images/icns/settings-1.svg" alt="">
        </a>
        <h4>TEST</h4>
      </div>
    </li>
  </ul>
</div>

我正在使用此脚本进行幻灯片切换

$('#panel').hide();
$("#flip").click(function () {
    $(this).next("#panel").slideToggle("slow");
});

它只会在第一个<li>上切换，而不会在其余的<li>上切换。 不知道我在做什么错。 $(this).next("#panel").slideToggle("slow"); 似乎没有用。

我添加了jsfiddle链接

Answer 1

• 请勿使用相同的ID超过1个div。 违反w3c标准
• 使用类作为click() jquery选择器
• 我在您的html中看不到id="panel" 。 使用类代替

 $('.panel').hide(); $(".flip").click(function() { $(this).next(".panel").slideToggle("slow"); }); 

 .manage-account-master { width: 100%; height: 100%; margin: 0 auto; } .manage-account-master-top { width: 100%; height: 50%; } .manage-account-master-bottom { width: 100%; height: 50%; } .manage-account-1 { width: 50%; float: left; height: 100%; position: relative; } .manage-account-2 { width: 50%; float: right; height: 100%; position: relative; } .manage-account-3 { width: 50%; float: left; height: 100%; position: relative; } .manage-account-4 { width: 50%; float: right; height: 100%; position: relative; } .manage-account-inner { display: table; position: absolute; height: 100%; width: 100%; } .manage-account-inner-1 { display: table-cell; vertical-align: middle; } .manage-account-inner-2 { margin-left: auto; margin-right: auto; max-width: 600px; text-align: center; h4 { font-size: 1.2rem; } ul { display: block; } } .rig { max-width: 100%; margin: 0 auto; padding: 0; list-style: none; max-height: 100%; } .rig li { display: inline-block; width: 50%; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; float: left; } .manage-image-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: block; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; } .manage-image-container img { width: 80px !important; margin: auto; position: relative; height: auto; z-index: 40; padding-top: 25px; } #panel, #flip { padding: 5px; text-align: center; } #panel { background: aliceblue; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="manage-account-master"> <div class="manage-account-inner"> <div class="manage-account-inner-1"> <div class="manage-account-inner-2"> <ul class="rig"> <li> <div class="flip manage-image-container"> <a href="#"> <img src="https://creativecommons.org/wp-content/uploads/2016/06/search.png" alt=""> </a> <h4>Cats</h4> </div> <div class="panel"> Menus </div> </li> <li> <div class="flip manage-image-container"> <a href="#"> <img src="https://maxcdn.icons8.com/Share/icon/Very_Basic//upload_21600.png" alt=""> </a> <h4>Dogs</h4> </div> <div class="panel"> Menus </div> </li> <li> <div class="flip manage-image-container"> <a href="#"> <img src="http://freedesignfile.com/upload/2017/09/house-icon-vector.jpg" alt=""> </a> <h4>Horses</h4> </div> <div class="panel"> Menus </div> </li> <li> <div class="flip manage-image-container"> <a href="#"> <img src="https://lh3.googleusercontent.com/ez8pDFoxU2ZqDmyfeIjIba6dWisd8MY_6choHhZNpO0WwLhICu0v0s5eV2WHOhuhKw=w170" alt=""> </a> <h4>Settings</h4> </div> <div class="panel"> Menus </div> </li> </ul> </div> </div> </div> </div> 

同样在JSFiddle上 。