0

私はNレベルのメニュー構造を持っており、最初はすべてのレベルの子メニューを非表示にして、親メニューのホバーで表示する必要があります。これを試していたので、すべての子を非表示にしてクリックで表示するようになりましたが、問題は、他の親をクリックすると、以前に開いていたメニューを閉じる必要があり、そのメニューをもう一度クリックすると子が非表示の状態になり、メニューを開いたり閉じたりするときにイージングとアニメーションの効果が必要になることです。トグルとして。

これは私がやろうとしてきたことです：

$(document).ready(function(){
$("li").children('ul').hide();
$("li a").click(function(){
$(this).next('ul').toggle();            
$(this).parent().siblings('li').children('ul').hide();

これが私がやろうとしていることのjsフィドルです

メニューのクラスや属性を使用しないでください。トップレベルのulだけがクラスを残しているので、jqueryですべてを実行する必要があります。イージングとアニメーションの部分が必要です。

4

2 に答える 2

0

slideUp()とを使用してアニメーションを追加できslideDown()ます。

jsFiddle

$(document).ready(function(){
    $("li").children('ul').hide();
    $("li a").click(function(){
        $(this).next('ul').find('ul').hide();
        $(this).next('ul').slideDown();            
        $(this).parent().siblings('li').children('ul').slideUp();           
    });     
});

アクティブリストアイテムのクラスでCSS3トランジションを使用することで、これをかなり簡単に行うこともできます。

編集：わかりました。これを追加して、クリックして開いたときにすべての内部リストを非表示にしてみてください。

$(this).next('ul').find('ul').hide();
于 2013-03-24T06:20:00.290 に答える
0

@Tyriarの回答を完了するには、次のようにJQueryUIイージングエフェクトを使用します：http：//jqueryui.com/effect/#easing

http://jsfiddle.net/6u4LJ/2/

$(document).ready(function () {
    $("li").children('ul').hide();
    $("li a").click(function () {
        $(this).next('ul').animate({
            height: "show"
        }, 2000, 'easeInOutBounce');
        $(this).parent().siblings('li').children('ul').animate({
            height: "hide"
        }, 2000, 'easeInOutBounce');
    });
});
于 2013-03-24T06:24:58.790 に答える