jquery-selectors - Jquery Accordion 选择正确的选择器

Question

我正在努力将正确的选择器插入 jquery。当我插入“.accordionButton”时，整个 div 都是可点击的，并且功能很好。但是，我只想使“h3.toggle a”可点击，但插入该选择器不起作用。我需要在这里更改 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>

查询：

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

Answer 1

您正在使用

$(this)

但是您更改了选择器，您需要将所有 $(this) 选择器更改为

$('.accordionButton')

小提琴

Answer 2

好的，这就是我所在的位置...按钮现在可以正常工作，但是单击 .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 实例，而不是所有实例。