Question

DEMO

我正在做一个简单的jquery手风琴效果，如下所示。

JQUERY

$(function ($) {
  $('.Accordian').find('.Btn').click(function () {
    $(this).next('.Content').slideToggle('fast');
    $('.Content').not($(this).next()).slideUp('fast');
  });
});

HTML

<div class="Accordian">
  <div class="Btn"></div>
  <div class="Content"></div>
</div>

这项工作非常棒，但如果内容放在.Btn和.Content之间，那么它会中断。

问题

如何直接定位相对于的下一个可用类名点击按钮？
如何定位班级名称的所有元素，除了下一个可用的元素相对于点击按钮的类名？

Answer 1

尝试使用siblings()

$(function ($) {
    $('.Accordian').find('.Btn').click(function () {
        //cache the value so that it can be used in the next statement
        var $content = $(this).siblings('.Content').slideToggle('fast');
        $('.Content').not($content).slideUp('fast');
    });
});

Answer 2

尝试使用.nextAll()和.first()来完成您的任务。实际上，我们已将.first()用于安全目的。

  $('.Accordian').find('.Btn').click(function () {
    var targetElem = $(this).nextAll('.Content').first();
    targetElem.slideToggle('fast');
    $('.Content').not(targetElem).slideUp('fast');
  });

如何使用类名来定位下一个元素？

DEMO

2 个答案:

DEMO