Question

页面上有多个按钮。单击后，将触发所有按钮。

仅创建一个按钮，该按钮位于被单击的按钮中，并且与

在同一div中

“详细信息”，点击即可触发。

页面上的相同按钮：


jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      $('.details').toggle("fast");

    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>

Answer 1

对于这种html结构，应像这样导航并找到相应的.details：

jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      // Changed Code
      $(this).parent().next().find('.details').toggle("fast");
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>

只需单击一个按钮即可切换

1 个答案: