0

このメニューに問題があります。サブカテゴリにカーソルを合わせると、スライドアップが続きます。

サブカテゴリにカーソルを合わせたままにしておきたいのですが、マウスを外側に動かすとスライドアップします。同じようにメインカテゴリに移動します。助けてください。私はこれに1時間取り組んでいましたが、解決策はありませんでした。

$(document).ready(function(){
 $('ul#level1').slideUp();
       $('a#tab').hover(function(){
                 var content_show = $(this).attr('title');
                $('.'+ content_show).stop().slideDown();

            },function(){


                var content_show = $(this).attr('title');
                $('.'+ content_show).stop().slideUp();


            });
 });





                <li><a href="#" id="tab" class="active" title="one">Sport</a>

                    <ul id="level1" class="one">
                    <li><a href="#">View All</a></li>
                    <li><a href="#" >Shoes</a></li>
                    <li><a href="#" >T-Shirt</a></li>
                    <li><a href="#" >Tools</a></li>
                    <li><a href="#" >Hats</a></li>
                    <li><a href="#">Pants</a></li>
                    </ul>


                </li>

                <li><a href="#" id="tab" class="tab" title="two">Foods</a>

                    <ul id="level1" class="two">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    </ul>


                </li>
4

2 に答える 2

0

あなたの構造は大丈夫のようです。純粋なCSSを使用してこのコードを確認してください。これは、JavaScriptへの移植に役立ちます。使用する必要はありませんtitle：

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

フィドル： http：
//jsfiddle.net/vMuxA/（垂直メニュー）
http：//jsfiddle.net/vMuxA/1/（水平メニュー）

于 2012-10-28T03:51:05.393 に答える
0

デモ<li>ではなくスライドしてみてください：http ：//jsfiddle.net/yosafatade/VNkbp/<a>

実際、私は@PraveenKumarに同意しますが、それでもjqueryを使用したい場合は、使用することをお勧めしますslideToggle()

于 2012-10-28T04:54:36.770 に答える