0

sub-items親の上にマウスを置いたときに表示される垂直メニューをコーディングしました。HTML構造は次のとおりです。

<ul id="nav">
    <li><a href="#">Continents</a>
        <ul>
            <li><a href="#">Europe</a>
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
            <li><a href="#">Asia</a>
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
            <li><a href="#">Africa</a>
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Places</a>
        <ul>
            <li><a href="#">Place1</a></li>
            <li><a href="#">Place2</a></li>
        </ul>
    </li>
    <li><a href="#">Oceans</a>
        <ul>
            <li><a href="#">Pacific</a></li>
            <li><a href="#">Atlantic</a></li>
        </ul>
    </li>
</ul>

最初はnav li要素のみが表示されます。ただし、ユーザーがにカーソルを合わせるとnav li a、連続する子要素が表示されます。要素ulの下に1つしかないときに、これを行うことに成功しました。initial liしかし、[上記のHTML構造でわかるように]、ul1番目のliブランチに2番目のネストが必要です。

私のJavaScriptコードは次のとおりです。

<script type="text/javascript">
            $(document).ready(function () {
                $('#nav > li > a').hover(function(){
                    if ($(this).attr('class') != 'active'){
                        $('#nav li ul').slideUp();
                        $(this).next().slideToggle();
                        $('#nav li a').removeClass('active');
                        $(this).addClass('active');
                    }
                });
            });         
        </script>
4

1 に答える 1

3

この種の出力が必要ですか：http：//jsfiddle.net/uNKvu/

$('#nav li').hover(function () {
    $('> ul',this).slideToggle();
});
于 2013-01-20T09:06:38.953 に答える