在點擊添加或DIV

刪除類我有一個標記，看起來像如下：在點擊添加或DIV

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div>

我所試圖做的是使用jQuery來添加或刪除.is-opened類div與.accordion上課時類.accordion-header

我的問題是，divs的一些已經包含類.is-opened和一些不。我需要能夠點擊並打開（添加class .is-opened）只有被點擊的特定div。

這是我jQuery：

function accordionOpener(obj) { 
    var accordionHeader = obj.find('.accordion-header'); 
    var accordionBody = obj.find('.accordion'); 
    accordionHeader.on('click',function(){ 
     $(accordionBody).toggleClass('is-open'); 
    }); 
} 
new accordionOpener($(this));

我不是在jQuery的一個大的親，JavaScript的這麼跟我說話，好像我是10張贊成票。

來源

2016-11-04 AlexB

我沒有看到任何與標記相關的事件。你如何引用accordionOpener？你是否嘗試過：$（'。accordion'）。on（'click'，function（）{new accordionOpener（$（this））;}）; – DinoMyte

我認爲這個$（accordionBody）.toggleClass（'is-open'）;是因爲它要麼打開所有的手風琴，要麼關閉它們全部 – AlexB

你的邏輯不完全正確。要解決此問題，請將點擊事件處理程序直接附加到.accordion-header類。從那裏你可以使用DOM遍歷來查找相關的.accordion元素並切換類。試試這個：

$(function() { 
 
    $('.accordion-header').click(function() { 
 
    $(this).closest('.accordion').toggleClass('is-open'); 
 
    }); 
 
});

.is-open { color: #C00; } /* this is only to see the class being added/removed */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div>

來源

2016-11-04 17:38:37

我還以爲OP想關閉其他打開的div ..不知道 –

你可以簡單的使用jQuery UI的手風琴插件：https://jqueryui.com/accordion/ 簡單地包裹在div所有元素，改變你的標題爲h3標籤。你調用插件類似如下：

$('.accordion').accordion();

這個插件還提供鍵盤訪問和其他一些輔助功能。

來源

2016-11-04 17:39:08 marcobiedermann

是的，總是使用內置的插件方法來做東西..否則你會最終很多自定義代碼.. –

當OP可能只需要3行代碼時，浪費地完全包括jQueryUI，儘管 –

@RoryMcCrossan是和不是。你是絕對正確的jQuery UI證明了更多。但是，如果你要創建一個好的可訪問模塊，你不僅需要應用一個類來切換它的視圖。你也可以使用模塊捆綁器，它只包含必要的代碼，而不是整個jQuery UI庫。 – marcobiedermann

這是一種僅在開放式手風琴上進行維護的方法。

$('.accordion').click(function(){ 
    $('.accordion').removeClass('is-open'); 
    $('.show').removeClass('show'); 
    $(this).addClass('is-open'); 
    $('.accordion-content', this).addClass('show') 
})

在CSS中，您需要指定.show類並隱藏所有其他面板。我還添加了一個光標，只是爲了它。 :)

.accordion { 
    cursor: pointer; 
} 

.accordion-content { 
    display:none; 
} 

.show { 
    display: initial; 
}

來源

2016-11-04 17:53:43 Falk

在點擊添加或DIV

回答

相關問題