隐藏显示不适用于多个 div

Question

我正在使用 slideToggle 方法 hide/show 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>

Answer 2

您无需复制它并重命名 <div> 并创建新函数。

执行以下步骤：

在您单击以执行 slideToggle（例如翻转）的每个 div 处给予相同的 class。
使用选择器 $(this) 识别点击的元素。
使用jquery .next()函数获取下一个元素。
就此致电 .slideToggle()。
完成了！！

查看下面的代码：

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

隐藏显示不适用于多个 div

hide show not working on multiple divs

html

javascript

css

show

hide