“这个” jQuery中使用，但不知道如何实现它

-1

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

，因为现在当点击“.nds”的所有元素班级“手风琴头”打开。或者除此之外还有其他办法可以实现吗？

编辑与（希望）相关的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>

来源

2017-08-28 Vroryn

向我们展示HTML –

如果您的.nds与您的手风琴不相关=那么这将无济于事。在点击事件中$（this）将是每个带有.nds类的html项目，所以我们不确定我们理解你。 –

@MaxDeepfield只有一个点击...不是_all_ – giorgio

如果手风琴是你已经绑定的点击目标元素的父，你可以做这样的事情：

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

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

这取决于那些手风琴div在DOM中的相对于目标的位置，但总的想法是，您将“walk”以$(this)开始的DOM --ie事件目标 - 直到找到这些节点。

查看下面的方法以防万一。 closest()是不是你所需要的：

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

使用这些方法的适当组合（你可以把它们结合在一起）从$（本），以获得您想要操纵的元素。

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

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

更新后OP帖子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')具有约束力，因此我以相同的方式编写我的代码。

来源

2017-08-28 23:27:59

我试过.find（），.parent（）和.silblings（），他们都没有工作。所以假设它们不是“相关的”可能是安全的。我会发布html代码，但它很庞大，我不知道与这个问题有关的部分：/ – Vroryn

@Vroryn我们只需要看到足够多的HTML，我们就可以找出元素与一类“nds”与您想要影响的手风琴标题和手风琴内容有关。 –

我更新了我的帖子，不知道这是你在找什么？ – Vroryn

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

来源

2017-08-28 23:58:14

“这个” jQuery中使用，但不知道如何实现它

回答

相关问题