1

私のjQueryアコーディオンには次の構造があります。

<ul id='accordion'>
    <li class='header'>
        <a href='#'>Click me</a>
    </li>
    <li class='content'>
        <div>blah blah</div>
    </li>
    <li class='header'>
        <a href='#'>Click me too</a>
    </li>
    <li class='content'>
        <div>blah blah</div>
    </li>
    <li class='header'>
        <a href='#'>Click me as well</a>
    </li>
    <li class='content'>
        <div>blah blah</div>
    </li>
</ul>

ヘッダーliに他のリンクをいくつか入れたいのですが、問題は、li全体がクリック可能で、その下のliがアクティブになることです。ヘッダーliのリンクテキストをクリック可能にしたいだけです。ヘッダーを li.header として設定しましたが、それを li.header a に変更しても役に立ちません。また、initでアコーディオンを無効にしてから、リンクをクリックすると、コンテンツliをインデックスで「アクティブ化」する関数をバインドしようとしました。

jQuery('#accordion').accordion({
    header: 'li.header',
    collapsible: true,
    active: false,
    autoHeight: false
});

jQuery('li.header a').live('click', function(){
    var i = jQuery(this).parent().next().index();
    jQuery('#accordion').accordion('activate', i);
});

私の質問が明確であることを願っています！または、自分でアコーディオンをコーディングする必要があるかどうかアドバイスしてください。

ありがとう！

4

2 に答える 2

1

UIがないと、次のように機能します。

デモjsFiddle

jQuery（UIなし）

$('#accordion li.content').hide();


$('li.header > a').on('click',function(){
    var nxt = $(this).parent('li').next('li.content');
    
    nxt.is(':hidden') ? ($('#accordion > li.content').slideUp() , nxt.slideDown()) : nxt.slideUp() ;
    
});
于 2012-04-06T05:20:04.413 に答える