Question

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

这是我的可运行代码段：

$(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元素 relative 定位到所点击的

。

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);
    });
});

仅切换最近的DIV

3 个答案: