Question

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
$('#toggle').click(function() {
$('.toggle').slideToggle('fast');
return false;
});

    });
</script>


<a href="#" id="toggle">show-hide</a><br />
<div class="toggle" style="display:none;">test</div>

<a href="#" id="toggle2">show-hide</a><br />
<div class="toggle" style="display:none;">test2</div>

您好，我需要多次切换工作，现在他点击了

上的所有行

Answer 1

使用.nextAll(':first')定位特定元素

  $(function () {
      $('a').click(function () {
          $(this).nextAll('.toggle:first').slideToggle('fast');
          return false;
      });

DEMO

解决方案＃1

您可以提供要单击此类

的类的链接

<强> HTML

<a href="#" class="linkClick" id="toggle">show-hide</a><br />
<div class="toggle" style="display:none;">test</div>

<a href="#" class="linkClick" id="toggle2">show-hide</a><br />
<div class="toggle" style="display:none;">test2</div>

<强>的jQuery

$('.linkClick').click(function () {
      $(this).nextAll('.toggle:first').slideToggle('fast');
      return false;
});

解决方案＃2

或者你可以使用Attribute-starts-with selector ^=

  $('a[id^="toggle"]').click(function () {
      $(this).nextAll('.toggle:first').slideToggle('fast');
      return false;
  });

Answer 2

使用attribute starts with selector，然后使用current element获取指定类的下一个div，然后将其滑动。

尝试，

$(function() {
     $('a[id^="toggle"').click(function() {
        $(this).nextAll('.toggle').first().slideToggle('fast');
     });
 });

jq简单切换多个元素

2 个答案: