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>

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

Answer 1

您正在使用

$(this)

但是你更改选择器，你需要将所有$（this）选择器更改为

$('.accordionButton')

<强> FIDDLE

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实例而不是所有实例。

Jquery手风琴选择正确的选择器

2 个答案: