javascript - 隐藏显示不适用于多个 div

Question

我正在使用 slideToggle 方法来隐藏/显示一个 div。我试图在一个页面上多次复制此操作，但它只适用于第一个页面。我想出了一种方法让它在每个 div 上工作，但必须重命名每个 div 并在 javascript 中添加一个新函数。我可以做些什么来清理我的代码，因为我将在整个页面中使用它并为每个 div 创建新实例并不高效。

<script>
  $(document).ready(function() {
    $("#flip").click(function() {
      $("#panel").slideToggle("slow");
    });
    $("#flip2").click(function() {
      $("#panel2").slideToggle("slow");
    });
    $("#flip3").click(function() {
      $("#panel3").slideToggle("slow");
    });
  });

</script>

<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div id="flip">Click to view HTML</div>
<div id="panel" style="display:none">
  <textarea rows="3" cols="50">
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
  </textarea>
</div>

<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div id="flip2">Click to view HTML</div>
<div id="panel2" style="display:none">
  <textarea rows="3" cols="50">
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
  </textarea>
</div>

<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div id="flip3">Click to view HTML</div>
<div id="panel3" style="display:none">
  <textarea rows="3" cols="50">
    <button type="button" class="btn select-options"><span>select options</span></button>
  </textarea>
</div>

Answer 1

您可以使用类代替 id，并在回调函数中使用 .next() 方法:

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="button-label">Active</p>
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
    <div class="flip">Click to view HTML</div>
    <div class="panel" style="display:none">
            <textarea rows="3" cols="50"><button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
            </textarea>
    </div>

    <p class="button-label">Disabled</p>
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
    <div class="flip">Click to view HTML</div>
    <div class="panel" style="display:none">
            <textarea rows="3" cols="50"><button type="button" class="btn a-cart disabled"><span>ADD TO CART</span>
            </button>
            </textarea>
    </div>

    <p class="button-label">Select Options</p>
    <button type="button" class="btn select-options"><span>select options</span></button>
    <div class="flip">Click to view HTML</div>
    <div class="panel" style="display:none">
            <textarea rows="3" cols="50"><button type="button" class="btn select-options"><span>select options</span>
            </button>
            </textarea>
    </div>