Jquery手風琴選擇正確的選擇器

我正在努力將正確的選擇器插入到jquery中。當我插入「.accordionButton」時，整個div是可點擊的，並且功能很好。但是，我只想製作「h3.toggle a」可點擊，但插入該選擇器不起作用。我需要在這裏改變jQuery中還有其他東西嗎？任何意見是極大的讚賞。謝謝！Jquery手風琴選擇正確的選擇器

的HTML：

<div class="accordionButton"> 

<div class="case-top"> 
<div class="case-left"></div> 

<div class="case-right"> 
<h3 class="toggle"><a href="#one">Our Strategy and Results</a></h3> 
</div> 

</div><!--end case-top--> 
</div><!--end button--> 

<div class="accordionContent">sliding content here</div>

jQuery的：

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton h3.toggle a').click(function() { 

//REMOVE THE ON CLASS FROM ALL BUTTONS 
$('.accordionButton h3.toggle a').removeClass('on'); 

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
$('.accordionContent').slideUp('normal'); 

//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
if($(this).next().is(':hidden') == true) { 

//ADD THE ON CLASS TO THE BUTTON 
$(this).addClass('on'); 

//OPEN THE SLIDE 
$(this).next().slideDown('normal'); 
} 
}); 
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton h3.toggle a').mouseover(function() { 
$(this).addClass('over'); 

//ON MOUSEOUT REMOVE THE OVER CLASS 
}).mouseout(function() { 

$(this).removeClass('over');         
}); 
$('.accordionContent').hide(); 
});

來源

2013-09-26 Beth

您正在使用

$(this)

，但後來改變了選擇，你需要將所有的$（這）選擇到

$('.accordionButton')

FIDDLE

來源

2013-09-26 13:31:15 Sbml

我更改了所有實例，並且按鈕正在切換面板，但它現在切換所有面板，並將實例應用於所有.accordionButton按鈕。 – Beth

好吧，這裏是我在哪裏...按鈕現在工作正常，但點擊.accordionContent的所有實例開放，不只是下一個。（僅供參考，我移除此代碼剪斷的鼠標懸停）

Jquery的

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton h3.toggle a').click(function() { 

//REMOVE THE ON CLASS FROM ALL BUTTONS 
$('.accordionButton h3.toggle a').removeClass('on'); 

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
$('.accordionContent').slideUp('normal'); 

//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
if($('.accordionButton').next().is(':hidden') == true) { 

//ADD THE ON CLASS TO THE BUTTON (correct) 
$(this).addClass('on'); 

//OPEN THE SLIDE 
$('.accordionButton').next().slideDown('normal'); 
} 
});

我猜行：

$('.accordionButton').next().slideDown('normal');

和

if($('.accordionButton').next().is(':hidden') == true) {

是線，需要編輯。我需要這兩行來打開和關閉「下一個」.accordionContent實例而不是所有實例。

來源

2013-09-26 17:24:23 Beth

Jquery手風琴選擇正確的選擇器

回答

相關問題