0

メニューとサブメニューがあります。stackoverflow と api.jQuery からのいくつかの回答を組み合わせて、Jquery で切り替えました。しかし今、私は本当に立ち往生しており、それを解決する方法を見つけることができません. メニューに到達するたびにサブメニューが切り替わります（良いことです）が、サブメニューのリンクに到達するたびに消えます。

そして、スタイリングのためにフィドルでは機能しません。それが、私がそこに入れなかった理由です。

HTML

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>
<div id="submenu"></div>

CSS

.menu {
    display: inline;
    float:left;
    width:180px;
    height:50px;
    color:#191919;
    text-align:center;
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
    position:relative;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:62px;
    right:25%;
    z-index:300
}
.submenu {
    background-color:#cecece;
}
.submenu > li {
    list-style-type:none;
    background-color:#fff;
    color:blue;
    cursor:pointer;
}
#submenu {
    color:white;
    height:40px;
    width:900px;
    background:#630000;
    margin-top:50px;
    position:relative;
}

JS

$(document).ready(function () {
    $("li.menu").mouseenter(function () {
        $(this).find(".submenu").toggle();
    });
});
4

4 に答える 4

2

その後に変更mouseenterするとmouseover、子要素にカーソルを合わせると閉じなくなります。mouseover表示と非表示に使用しmouseoutます。

jsFiddle の例

$(document).ready(function () 
{
    $(".menu").mouseover(function () 
    {
        $(this).find(".submenu").show();
    });

    $(".menu").mouseout(function () 
    {
        $(this).find(".submenu").hide();
    });
});
于 2013-06-04T08:19:58.163 に答える
1

決して完璧な例ではありませんが、この純粋な css バージョンは、始めるための良い基盤を提供するはずですか?

http://jsfiddle.net/bNpnZ/2/

<ul class="menu">
    <li> <a href="meist.html">Meist</a>

        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li> <a href="seadmed.html">Seadmed</a>

        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

ul {
    margin:0;
    list-style:none;
}

.menu {
    width:100%;
    float:left;
    background:#eee;
}
.menu > li {
    float:left;
    margin:0 0 0 10px;
    position:relative;
}
.menu > li:first-child {
    margin:0;
}
.menu > li > a {
    padding:10px 20px;
    float:left;
    color:#666;
}
.submenu {
    position:absolute;
    top:-9999em;
    left:0;
    font-size:14px;
    background-color:#ccc;
}
.menu > li:hover .submenu {
    top:30px;
}
于 2013-06-04T07:55:06.750 に答える
1

表示と非表示を切り替えると、mouseenterイベントが最初にトリガーされたときに表示され、2 回目に非表示になります。条件ステートメントを追加して、マウスがその上にある場合に非表示にならないようにする必要があります。それを行うためのより良い方法は、使用mouseenterして表示および非表示にmouseoutすることです。

于 2013-06-04T07:46:05.417 に答える