隐藏显示无法处理多个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()方法：

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您无需复制此内容并重命名<div>并创建新功能。

采取以下步骤：

1. 为您点击执行slideToggle（例如翻转）的每个div提供相同的类。
2. 使用选择器$(this)识别点击的元素。
3. 使用jquery .next()函数获取.next元素。
4. 就此致电.slideToggle()。
5. 它已经完成!!

请参阅以下代码：

    <script>
        $(document).ready(function() {
           $(".flip").click(function() {
              $(this).next().slideToggle("slow");
           });
        });

    </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 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 class="flip">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 class="flip">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>