Question

我想合并＆＃34;这个＆＃34;在这段代码中：

$(".nds").on('click', function () {
 $("div.accordion-header").switchClass("active");
 $('div.accordion-header').next('div.accordion-content').slideDown(750);
});

因为现在当＆＃34; .nds＆＃34;单击，类的所有元素＆＃34; accordion-header＆＃34;打开。或者除此之外还有其他方法可以实现同样的目标吗？

编辑（希望）相关的HTMl代码：

        <div id ="floating">
        <div class="nd3 nds" data-toggle="tooltip" data-placement="left"><a href="#SG16">16</a></div>
        <div class="nd2 nds" data-toggle="tooltip" data-placement="left"><a href="#SG17">17</a></div>
        <div class="nd1 nds" data-toggle="tooltip" data-placement="left"><a href="#SG18">18</a></div>

        <div id="floating-button" data-toggle="tooltip">
            <span class="ham"><i class="fa fa-bars" aria-hidden="true"></i></span>
        </div>
    </div>
    <div class="container">
        <div class="accordion">
            <!-- ############ SG01 ############ -->
            <div class="group" id="SG01">
                <div class="accordion-header"></div>
                <div class="accordion-content"></div>
            </div>
        </div>
    </div>

Answer 1

如果手风琴是您将点击绑定到的目标元素的父级，您可以执行以下操作：

 $(".nds").on('click', function () {
     var header = $(this).closest('.accordion-header'),
        content = header.next('.accordion-content');

    header.switchClass('active');
    content.slideDown(750);
});

这取决于那些手风琴div在DOM中相对于目标的位置，但一般的想法是你将从$(this)开始“行走”DOM --i.e。事件目标 - 直到找到那些节点。

请查看以下方法。closest()不是您所需要的：

.find(), .siblings(), .parent()

使用这些方法的适当组合（您可以将它们链接在一起）从$（this）到您想要操作的元素。

还有一些笔记不是特定于您的问题，但会帮助您。如果要在函数中多次使用同一个选择器，请将其保存到变量中。这样，jQuery只需要“遍历”DOM就可以找到它一次。否则，你正在让jQuery去寻找它。（在大型代码库中，类似的东西往往会增加并拖累性能。）

此外，您可以选择仅使用类（'.accordion-header'）而不是div.accordion-header。更有效的选择器也有助于提高性能。

OP POSTS MARKUP后更新：

看起来您正在尝试使用一些预制组件，如引导小部件。因此，您不必手动编码幻灯片切换。

话虽如此，我认为你正试图做这样的事情：

 $(".nds").on('click', function () {
     var targId = $(this).find('a').attr('href');
     $(targId).find('.accordion-header').toggleClass('active');
     $(targId).find('.accordion-content').slideToggle(750);     
 });

这似乎是为了让用户点击链接，而不是包装它的“nds”div。但是，因为你绑定到$('.nds')我正以相同的方式编写代码。

Answer 2

$(".nds a").on('click', function (e) {
   e.preventDefault();
   // remove active class from all accordion headers
   $('.accordion-header').removeClass('active');

   // the key here is to grab the target from the href of the anchor
   var target = $(this).attr('href');
   // then make changes inside the target only 
   $(target)
      .find('.accordion-header')
      .addClass("active") 
      .next('div.accordion-content')
      .slideDown(750);
});

使用＆＃34;这个＆＃34;在jquery中，但不知道如何实现它

2 个答案: