助けが必要です。私はどこでも見てきましたが、私が探しているのは少しユニークだと思います.
メニューオプションをクリックするとオプションのグループになるメニューを作ろうとしています。私が得たそのビット、私は思う。私が今達成しようとしているのは、サブメニューの子がリンクの行の間に直接スライドできるようにすることです。横のアコーディオン メニューのようなもので、すべてのトップ メニュー リンクが縦ではなく一列に並んでいます。
アクション、トップメニュー項目をクリックすると、サブメニューのリンクが表示されます。サブメニュー リンクをクリックすると、元のリンクに対応するサブサブメニュー項目が表示され、それ自体とその親以外はすべて非表示になります。
私はそれを正しく説明しているなら、父ではありません。私の頭は一日中この問題を解決しようとして少し頭が死んでいて、私は陥りそうです.
これは、私が達成しようとしているものの例です:
ここに行って何をしたかを確認したい場合http://jsfiddle.net/pi_mai/zuU5M/ だから私はこのHTMLコードでメニューを作ろうとしています(コードを短くするために多くのリンク項目を削除しました):
<nav>
<ul class="topmenu">
<li class="topmenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="topmenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="subsubmenu submenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-7"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-8"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-2">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-3">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
</nav>
.
$('.topmenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.submenu').not(this).removeClass('toggle');
$('.submenu.' + itemClass ).toggleClass('toggle');
$('.subsubmenu.toggle').siblings().removeClass('toggle')
});
$('.submenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.subsubmenu').not(this).removeClass('toggle');
$('.subsubmenu.' + itemClass ).toggleClass('toggle');
});
誰でも私を助けることができますか？
編集
私には解決策があると思います。アニメーションを追加するだけですが、全体的に機能しており、私にとっては素晴らしいことです!
function menuTap( $this ){
var thisClass = $this.attr('class');
if( $this.parent().hasClass("top-menu") ){
$('.sub-menu.' + thisClass ).animate().toggleClass('hide');
$('.sub-menu' + ':not(.' + thisClass + '), .sub-sub-menu' ).addClass('hide');
};
if( $this.parent().hasClass("sub-menu") ){
console.log( $this.attr('class') + ' li was clicked')
$('.sub-sub-menu.' + thisClass ).toggleClass('hide');
$('.sub-sub-menu' + ':not(.' + thisClass + ')' ).addClass('hide');
};
}
$('.top-menu li, .sub-menu li').on('click',function(){
menuTap( $(this) );
});