0

基本的なHTMLul/ liリスト、基本的なCSSコード、および基本的なjQueryコードを使用してメニューナビゲーションを作成しています。メニューには複数のレベルがありますが、問題は、最初のレベルが表示されると、その下のすべてのレベルが自動的に表示されることです。リンクをチェックして、動作しているかどうかを確認してください。SheetMusic＆Mediaメニューが問題になっています。

これらのサブメニュー項目をすべてデフォルトで表示しないようにするためのサポートが必要ですか？どうすればそれができるか知っている人はいますか？

私はあなたの一人が答えを持っていることを望みます。

モーガンケニオン

これがjsFiddleで動作する私の関連コードです。

HTML

<div id="container">
<ul id="dropdown">
    <li class="mainnav"><a href="#">About</a></li>
    <li class="mainnav"><a href="#">Sheet Music</a>
        <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png"/>
        <ul>
            <li><a href="#">Solos</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Solo 1</a></li>
                    <li><a href="#">Solo 2</a></li>
                </ul>
            </li>
            <li><a href="#">Exercises</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Snare Drum</a></li>
                    <li><a href="#">Tenors</a></li>
                    <li><a href="#">Bass Drum</a></li>
                    <li><a href="#">Various Corps.</a></li>
                    <li><a href="#">Drum Set</a></li>
                </ul>
            </li>
            <li><a href="#">Rudiments</a></li>
        </ul>
    </li>
    <li class="mainnav"><a href="#">Gallery</a></li>
    <li class="mainnav"><a href="#">Media</a>
        <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png">
        <ul>
            <li><a href="#">Video</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Solos</a>
                        <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                        <ul>
                            <li><a href="#">Snare</a></li>
                            <li><a href="#">Tenor</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ensembles</a></li>
                    <li><a href="#">Rudiments</a></li>
                    <li><a href="#">Miscellaneous</a></li>
                </ul>
            </li>
            <li><a href="#">Audio</a></li>
        </ul>
    </li>
</ul>

CSS

    #dropdown  {
        margin:0px 0px 0px 34px; 
        padding:0; 
        list-style:none;
    }
    #dropdown  li {
        float:left;         /* Show list items inline */
        margin: 3px 3px 1px 3px;
        /*padding: 7px 5px 14px 5px;*/
        position:relative; 
        font-size:100%;
    }
    #dropdown  li a {
        display:block;      /* Making sure a element covers whole li area */
        text-decoration:none; /* No underline */
        color:#FFFFFF;
        font-family: Calibri;
        font-size: 16px;
        font-weight: bold;
        padding:1px 7px 1px 7px;
        margin: 26px 0px 0px 7px;
    }
    #dropdown  li a:hover {
        background:rgba(255,255,255,.75);
        color:#000000;
        cursor:pointer;
        text-decoration:none;
        /*margin: 0px 0px 7px 7px;*/
        border-radius:2px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    /*Second Level */
    #dropdown  ul {
        position:absolute; 
        left:0; 
        display:none;
        margin:-3px 0px 0px 7px; 
        padding:0px 0px 0px 0px; 
        list-style:none;
        background: rgba(255, 255, 255, 0.75);
        border-radius:3px;
        z-index:4;
    }
    #dropdown ul:hover {
        position:absolute; 
        left:0; 
        margin:-3px 0px 0px 7px; 
        padding:0px 0px 0px 0px; 
        list-style:none;
    }
    #dropdown  ul li {
        float:left;
        width:108px;
        height:20px;    
        padding: 0px 0px 0px 0px;
        border-top:none;
    }
    #dropdown  ul li a {
        display:block;      /* Making sure a element covers whole li area */
        width:100px;
        padding: 2px 10px 2px 5px;
        margin: 0px 0px 0px 0px;
        color:#000000;
        text-decoration:none;   
    }

    #dropdown  ul li a:hover {
        padding: 2px 0px 2px 5px;
        margin: 0px 0px 0px 0px;
        color: rgba(255,255,255,1);
        background: rgba(0,0,0,.75);
    }
    /*Third Level    */
    #dropdown ul ul {
        position:absolute;
        display:none;
        left:0;
        padding:0px 0px 0px 0px;
        margin:-22px 0px 0px 118px;
    }
    #dropdown ul ul:hover {
        padding:0px 0px 0px 0px;
        margin:-22px 0px 0px 118px;
    }
    .droparrow {
        margin: 10px 0px 0px 30px;
        display:none;
    }
    .dropRarrow {
        position:absolute;  
        display:none;
        margin: -23px 0px 0px 111px;
    }

jQuery

$(document).ready(function () {    
        $('#dropdown li').hover(
            function () {
                $('ul, img', this).show();
            }, 
            function () {
                $('ul, img', this).hide();
            }
        );
    });​
4

1 に答える 1

1

ホバー関数では、内部のすべてのul要素とimg要素を表示します。直接子セレクターを使用して、次のことを修正します。

$(' > ul, > img', this).show();
于 2012-12-03T00:28:06.710 に答える