0

正しいセレクターを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();
});
4

2 に答える 2

0

あなたが使用している

$(this)

ただし、セレクターを変更する場合は、すべての $(this) セレクターを次のように変更する必要があります

$('.accordionButton')

フィドル

于 2013-09-26T13:31:15.277 に答える
0

わかりました、ここにいます... ボタンは正しく機能していますが、クリックすると、次のインスタンスだけでなく、.accordionContent のすべてのインスタンスが開きます。（参考までに、このコードからマウスオーバーを削除しました）

Jクエリ

$(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 インスタンスだけを開いて閉じるには、これらの 2 行が必要です。

于 2013-09-26T17:24:23.297 に答える