シンプルなアコーディオンを作成するための 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を参照してください。
ご覧のとおり、すべてのリンクが無効になっており、スクリプトをアクティブにするだけです。
私はこれに苦労しているので、何かポインタをいただければ幸いです。jqueryプラグインは絶対に避けたいです。前もって感謝します。
li.menu-item
推測では、実行する必要があるのはスクリプトのみですul
- メニューは cms によって動的に生成され、いつでも変更される可能性があるため、クラスを追加できません。したがって、スクリプトは単独で実行する必要があります。