0

シンプルなアコーディオンを作成するための CSS トリックに関するチュートリアルを見つけました。

http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

これは実際にはナビゲーションに基づいていないことに気付きましたが、それがどのように機能するかを見ることができたので、順序付けられていないリスト ナビゲーション メニューで機能するようにいくつかの簡単な調整を行いました。しかし、その時点では、アニメーションをスムーズに実行できたとしても、これが実際のアンカー クリック イベントを妨害することに気付きませんでした。

var allPanels = $('.sub-menu').hide();

$('li.menu-item a').click(function() {
    allPanels.slideUp();
    $(this).parent().find('ul').slideDown();
    return false;
});

問題を示すために作成したjsfiddleを参照してください。

http://jsfiddle.net/Yj4px/2/

ご覧のとおり、すべてのリンクが無効になっており、スクリプトをアクティブにするだけです。

私はこれに苦労しているので、何かポインタをいただければ幸いです。jqueryプラグインは絶対に避けたいです。前もって感謝します。


li.menu-item推測では、実行する必要があるのはスクリプトのみですul- メニューは cms によって動的に生成され、いつでも変更される可能性があるため、クラスを追加できません。したがって、スクリプトは単独で実行する必要があります。

4

2 に答える 2

3

function から を削除するreturn false;と、うまく機能します。

于 2012-06-18T21:26:17.460 に答える
1

タグが直接リンクでない場合、またはブラウザがページのトップに戻りたいreturn false場合にのみ必要です<a>

hrefパネルを持つアコーディオンヘッダーを「#」に変更。リダイレクト リンクは次の「IF」で正常に機能し、アコーディオンも正常に機能します。

$('li.menu-item a').click(function() {
    if($(this).attr('href')=="#"){
        allPanels.slideUp();
        $(this).parent().find('ul').slideDown();
        return false;
    }
});

サーバーコードで、開く必要があるパネル内にリンクするクラス「アクティブ」を追加します(hrefをURLに一致させます)ページの読み込み時

$('a.active').closest('ul').slideDown()
于 2012-06-18T21:41:17.507 に答える