「這個」 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中使用，但不知道如何實現它

回答

相關問題