Javascript 仅切换最近的DIV

尝试使其在按下+/-图标时，只有最近的div切换打开/关闭。目前所有div都将切换…我尝试使用

$（this）.sides

来修复它，但肯定是做错了什么，因为它不工作

以下是我的可运行代码片段：

$（文档）.ready（函数（）{
$（'.show less'）。在（'click'，function（）上{
$（'.report detail section'）。切换（'fast'）；
$（'.show less icon'）。滑动切换（0）；
$（'.show more icon'）。滑动切换（0）；
});
});
*{
保证金：0；
填充：0；
}
身体{
宽度：500px；
}
阀体h4{
背景:#555；
保证金：0；
}
a、 少展示{
光标：指针；
颜色：#FFF；
填充物：5px；
显示：块；
文字装饰：无；
}
.报告详情部分{
背景：#f0；
填充：15px 5px；
边框底部：1px实心#555；
}

步骤1：报告信息
报告摘要内容
步骤2：数据选择
报告摘要内容
您正在切换具有“report detail section”类的所有元素。代替

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

与

或

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

在这里使用上下文可以确保您选择了正确的元素进行切换

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

如果您的所有HTML都遵循相同的结构，那么这项工作就完成了


还尽可能缓存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);
    });
});

您正在切换具有“report detail section”类的所有元素。代替

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

与

或

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

在这里使用上下文可以确保您选择了正确的元素进行切换

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

如果您的所有HTML都遵循相同的结构，那么这项工作就完成了


还尽可能缓存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);
    });
});

您正在切换具有“report detail section”类的所有元素。代替

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

与

或

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

在这里使用上下文可以确保您选择了正确的元素进行切换

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

如果您的所有HTML都遵循相同的结构，那么这项工作就完成了


还尽可能缓存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);
    });
});

您正在切换具有“report detail section”类的所有元素。代替

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

与

或

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

在这里使用上下文可以确保您选择了正确的元素进行切换

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

如果您的所有HTML都遵循相同的结构，那么这项工作就完成了


还尽可能缓存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);
    });
});

试试这个：

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

试试这个：

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

试试这个：

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

试试这个：

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

尝试：


在单击处理程序中，

将选择该类的所有元素。通过使用

$（this）.parent（）.next（'.report detail section'）

替代，您可以将

.report detail section

元素作为相对于所单击元素的目标。

尝试：

在单击处理程序中，将选择该类的所有元素。通过使用

$（this）.parent（）.next（'.report detail section'）

替代，您可以将

.report detail section

元素作为相对于所单击元素的目标。

尝试：

在单击处理程序中，将选择该类的所有元素。通过使用

$（this）.parent（）.next（'.report detail section'）

替代，您可以将

.report detail section

元素作为相对于所单击元素的目标。

尝试：

---

在单击处理程序中，将选择该类的所有元素。通过使用

$（this）.parent（）.next（'.report detail section'）

取而代之，您可以将

.report detail section

元素作为相对于所单击元素的目标。

我还建议使用

$（'.show less icon'，this）.slideToggle（0）$（“.显示更多图标”，此项）。幻灯片切换（0）用于图标元素。谢谢，就这样做了…为了将来的参考，这里是更新的工作小提琴，我还建议
$（'show less icon'，this）。slideToggle（0）$（“.显示更多图标”，此项）。幻灯片切换（0）用于图标元素。谢谢，就这样做了…为了将来的参考，这里是更新的工作小提琴，我还建议
$（'show less icon'，this）。slideToggle（0）$（“.显示更多图标”，此项）。幻灯片切换（0）用于图标元素。谢谢，就这样做了…为了将来的参考，这里是更新的工作小提琴，我还建议
$（'show less icon'，this）。slideToggle（0）$（“.显示更多图标”，此项）。幻灯片切换（0）用于图标元素。谢谢，这样做了…为了将来的参考，这里是更新的工作小提琴，它可以同时切换两个图标。我建议
$（'.显示较少的图标'，这个）$（“.显示更多图标”，此项）。幻灯片切换（0）。这会同时切换两个图标。我建议
$（'.显示较少的图标'，这个）$（“.显示更多图标”，此）。幻灯片