使用slideToggle重複類

Question

我正在使用jQuery的slideToggle打開和關閉框。

該代碼與類一起使用以調用幻燈片。這工作正常，但是，我想使用此幻燈片多個盒子。當使用兩個或更多，當點擊其中一個，它打開所有的盒子，而不是一個自己點擊。

這裏是jQuery的：

$(document).ready(function(){ 
    $(".nav-extra-box").click(function(){ 
    $(".haja").slideToggle(250); 
    }); 
}); 

而且這裏的HTML：

<div class="nav-extra-box"></div> 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 

<div class="nav-extra-box"></div> 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 

<div class="nav-extra-box"></div> 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 

Answer 1

你的問題是，您使用的是類選擇，它返回一個對象的僞陣列，呼籲.slideToggle()在該陣列上將調用這些項目的每個上的該功能。

相反，你想找到只剩下一 DIV所需類：

$(document).ready(function(){ 
    $(".nav-extra-box").click(function(){ 
    $(this).next(".haja").slideToggle(250); 
    }); 
}); 

Answer 2

您可以使用this識別元素點擊並打開/關閉格旁邊使用next()功能，它。

$(document).ready(function(){ 
 
    $(".nav-extra-box").click(function(){ 
 
    $(this).next('.haja').slideToggle(250); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="nav-extra-box">a</div> 
 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 

 
<div class="nav-extra-box">b</div> 
 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 

 
<div class="nav-extra-box">c</div> 
 
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>