2011-01-06 14 views
0

jqueryを使用して単純なスクリプトを作成しています。ユーザーがリンクをクリックすると、スライドします。 他のリストをクリックしてスライドさせると、すでに展開されている他のリストを自動的に閉じる/スライドアップできますか?Jqueryメニュー作成の質問

つまり、1つのブロックが下にスライドすると、開いている可能性がある他のブロックが上にスライドする必要がある場合。誰かがこれを行う方法にステップバイステップで私を表示することはできますか?

おかげ

$(document).ready(function() { 
    $('.menu ul').hide(); 
    $('.menu .arrowUp').click(function() { 
    $(this).find(".third-level").toggle(); 
    }); 
}); 

<ul class="menu"> 
<li class="arrowUp"><a href="#">link1</a> 
    <ul class="third-level" >    
    <!-- third level non-active --> 
    <li class="arrowUp"><a href="/view/page/bache/16425">Some Link</a></li> 
    </ul> 
</li> 
<li class="arrowUp"><a href="#">link2</a> 
    <ul class="third-level" >    
    <!-- third level non-active --> 
    <li class="arrowUp"><a href="/view/page/bache/16425">some Links 2</a></li> 
    </ul> 
</li> 
<li class="arrowUp"><a href="#">link3</a> 
            <ul class="third-level" > 
             <!-- third level non-active --> 
             <li class="arrowUp"><a href="/view/page/bache/16417">Agricultural Commodities</a></li> 
             <!-- third level non-active --> 
             <li class="arrowUp"><a href="/view/page/bache/16418">Sugar</a></li> 
            <!-- third level non-active --> 
             <li class="arrowUp"><a href="/view/page/bache/16419">Coffee</a></li> 
             <!-- third level non-active --> 
             <li class="arrowUp"><a href="/view/page/bache/16420">Energy</a></li> 
             <!-- third level non-active --> 
             <li class="arrowUp"><a href="/view/page/bache/16421">Financials</a></li> 
            </ul> 
</li> 
<li class="arrowUp"><a href="#">link4</a></li> 
<li class="arrowUp"><a href="#">link5</a></li> 
<li class="arrowUp"><a href="#">link6</a></li> 
</ul> 
+0

をしたい1が何をしたい[この](http://jqueryui.com/demos/accordion/)です切り替える前に再びそれらをすべて非表示にする必要がありますか? – zzzzBov

+0

私はリストを掘り下げて、ユーザーがクリックしたリンクを強調表示しようとしています。 – user244394

答えて

0

あなたはただあなたが

$(document).ready(function() { 
    $('.menu ul').hide(); 
    $('.menu .arrowUp').click(function() { 
     $('.menu ul').hide(); 
     $(this).find(".third-level").toggle(); 
    }); 
}); 
+0

ありがとうございました。どのようなアイデアなぜあなたは、ページの上部にジャンプする傾向があるリンクをクリックすると?クリックしたときに子リストをどのようにハイライトできますか? – user244394

+1

'toggle'の後に単に' return false; 'を入れます。 – ifaour

0

私はちょうどコメントけど、私も答えとして投稿することがあります

は車輪の再発明気にしないでください:

あなたがjQuery UI accordionを使用することができます。