在ul li里面的Jquery多个div滑动切换

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标准
• 为addOperator
的jquery选择器使用class
• 我在你的HTML中看不到click()。使用类来代替

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

同样在JSFiddle。