仅切换最近的 DIV

Question

试图让它在你点击 +/- 图标时只有最近的 div 切换打开/关闭。目前所有的 DIV 都会切换...我尝试使用 $(this).siblings 来修复它，但肯定是做错了，因为它不起作用。

这是我的可运行代码sn-p：

$(document).ready(function() {
  $('.show-less').on('click', function() {
    $('.report-detail-section').toggle('fast');
    $('.show-less-icon').slideToggle(0);
    $('.show-more-icon').slideToggle(0);
  });
});

* {
  margin: 0;
  padding: 0;
}
body {
  width: 500px;
}
body h4 {
  background: #555;
  margin: 0;
}
a.show-less {
  cursor: pointer;
  color: #FFF;
  padding: 5px;
  display: block;
  text-decoration: none;
}
.report-detail-section {
  background: #F0F0F0;
  padding: 15px 5px;
  border-bottom: 1px solid #555;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h4><a class="show-less">Step 1: Report Info 
    <span class="glyphicon glyphicon-minus show-less-icon pull-right" aria-hidden="true" style="display:inline;" title="Hide Section Details"></span>
    <span class="glyphicon glyphicon-plus show-more-icon pull-right" aria-hidden="true" style="display: none;" title="Show Section Details"></span></a>
</h4>
<div class="report-detail-section" style="display: block;">
  Report Summary Content
</div>

<h4><a class="show-less">Step 2: Data Selection 
    <span class="glyphicon glyphicon-minus show-less-icon pull-right" aria-hidden="true" style="display:inline;" title="Hide Section Details"></span>
    <span class="glyphicon glyphicon-plus show-more-icon pull-right" aria-hidden="true" style="display: none;" title="Show Section Details"></span></a>
</h4>
<div class="report-detail-section" style="display: block;">
  Report Summary Content
</div>

Answer 1

试试：

$(document).ready(function () {
    $('.show-less').on('click', function () {
        $(this).parent().next('.report-detail-section').toggle('fast');
        $(this).find('span').slideToggle(0);
    });
});

jsFiddle example

在您的点击处理程序中，$('.report-detail-section') 将选择该类的所有元素。通过改用$(this).parent().next('.report-detail-section')，您可以将.report-detail-section 元素相对定位到被点击的元素。

Answer 2

您正在切换所有具有 'report-detail-section' 类的元素。而是替换

$('.report-detail-section').toggle('fast');

与

$(this).parent().next('.report-detail-section').toggle('fast');

或

$(this).closest('h4').next('.report-detail-section').toggle('fast');

在此处使用上下文可确保您选择了正确的要切换的元素。

还提到了@showdev，最好为其他元素提供上下文，并且多个元素可以具有相同的类。

如果您的所有 HTML 都遵循相同的结构，则此方法有效。

Check Fiddle

尽可能缓存 jQuery 选择器。在这种情况下没关系，但当您在应用程序中选择太多时。

$(document).ready(function () {
    $('.show-less').on('click', function () {
        var $this = $(this);
        $this.parent().next('.report-detail-section').toggle('fast');
        $('.show-less-icon, .show-more-icon', $this).slideToggle(0);
    });
});

Answer 3

试试这个：

$(document).ready(function() {
    $('.show-less').on('click', function () {
        $(this).closest("h4").next('.report-detail-section').toggle('fast');
        $(this).find('.show-less-icon').slideToggle(0);
        $(this).find('.show-more-icon').slideToggle(0);
    });
});