1

アコーディオン内にアクティブなセクションを設定しようとしています。これを行う方法を理解するのに非常に苦労しています。精力的に検索しましたが、特定のケースに対する解決策が見つかりませんでした。それは非常に簡単に思えますが、私はそれを理解できません。助けてください！

(私の意図は、このリストをマスターページに配置し、各コンテンツ ページに移動したときにアクティブなセクションを設定することです。)

アコーディオン リストを jsFiddle に保存しました: http://jsfiddle.net/pWbxm/14/

** div/header 形式を使用する jsFiddle の代替アコーディオン リスト: http://jsfiddle.net/hemiar/44UTR/

html:

<ul class="leftNavMenu">
    <li><a href="#" title="#">Home</a></li>
        <li><a href="#" title="#">HR + Benefits</a>
            <ul>
                <li><a href="#">HR Main</a></li>
                <li><a href="#">Policies</a></li>
                <li><a href="#">Benefits</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">Employee Handbook</a></li>
                <li><a href="#">Managers</a></li>    
            </ul>
        </li>    
        <li><a href="#" title="#">Departments</a> 
            <ul>
                <li><a href="#">Accounting</a>  
                <ul>
                <li><a href="#">Accounting Main</a></li>
                <li><a href="#">Draft Dates</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">InfoSend</a></li>
            </ul>
        </li>  
        <li><a href="#">Acquisitions</a> 
            <ul>
                <li><a href="#">Acquisitions Main</a></li>
                <li><a href="#">Bulk Acquisitions</a></li>
                <li><a href="#">Dealer Program Acquisitions</a></li>
                <li><a href="#">Training Manual</a></li>
            </ul>
        </li>   
        </ul>
    </li>
    <li><a href="#" title="#">Contacts</a> 
        <ul>
            <li><a href="#">Contacts Home</a></li>
            <li><a href="#">SAFE Phone List</a></li>
            <li><a href="#">CSAI Phone List</a></li>
            <li><a href="#">DND Codes</a></li>
            <li><a href="#">Phone User Guides</a></li>    
        </ul>
    </li>
</ul>

CSS:

.leftNavMenu{width: 195px;}

ul.leftNavMenu{line-height: 0.5em;}

ul.leftNavMenu ul{
    margin: 0;
    padding: 0;
    display: none;}

ul.leftNavMenu li{
    list-style: none;
    font-size:10px;font-weight:bold;
    color:#1D65B3;
    border-bottom:inset;
    border-width:1px;
    border-bottom-color:#BDD1E6;}

ul.leftNavMenu li a{
    line-height: 10px;
    padding: 10px 5px 5px 10px;
    display: block;}

ul.leftNavMenu li a:hover{
    background-color:#ffffff;
    color:#1D65B3;}

ul.leftNavMenu ul li{
    margin: 0;
    padding: 0;
    clear: both;
    font-family:Verdana, "Segoe UI";
    font-size:9px;font-weight:bold;
    background-color:#D5E6F8;
    color:#ffffff;}

ul.leftNavMenu ul li a{
    padding-left: 15px;
    outline:0;}

ul.leftNavMenu ul li a:hover{
    background-color:#ffffff;
    color:#1D65B3;}

ul.leftNavMenu ul ul li{    
    background-color:#ffffff;
    color:#1D65B3;
    border-bottom-style:dotted;}

ul.leftNavMenu ul ul li a{
    font-size:9px;font-weight:normal;
    padding-left: 30px;}

ul.leftNavMenu ul ul li a:hover{
    background-color:#E8EFF7;
    color:#1D65B3;}

ul.leftNavMenu span{
    float:right;}

JScript

     $(document).ready(function() {
        $('li').click(function(ev) {
            $(this).find('>ul').slideToggle('slow')
                .end().siblings().find('ul').slideUp('slow');
            ev.stopPropagation();
        });
    });
    var accordion = $('ul.leftNavMenu');
    accordion.accordion('activate', 2);
4

2 に答える 2

0

jQuery UIアコーディオンは、ドキュメントに示されているHTMLで動作するように設計されています。<ul><li>タグではうまくいかないと思います。

マークアップを使用するためにHTMLを書き直すことを検討する必要があります。例えば

<div id="accordion">
    <h3><a href="#section1">Section 1</a></h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3><a href="#section2">Section 2</a></h3>
    <div>
        More Content Here
    </div>
</div>
于 2012-05-04T21:44:55.387 に答える
0

この質問は、数年間未解決のままになっているようです。divタグとheaderタグを使用して3次ナビゲーションメニューに機能させることができましたが、ulタグでは機能しませんでした。ul リストの 1 番目と 2 番目のレベルのみを認識するようです。

于 2014-02-15T04:46:47.947 に答える