0

私はこのウェブサイトを開発しました: http://loloey.com/forme/formeeng.html "Change Universe" というページの左上にあるドロップダウン メニューに非常に奇妙な問題があります: このドロップダウン メニューに何度もカーソルを合わせると、 、ドロップダウン要素が消えます!!! この問題は、firefox、explorer 9、chrome などのすべてのブラウザで持続します。

シンプルな jquery コードでこのメニューを作成しました。

$(document).ready(function () {     
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(100);
    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(100);                      
    }
);

});

これはcssです：

/*---- CROSS BROWSER DROPDOWN MENU ----*/

#nav {

padding-left: 90px;
margin-top:-15px;
list-style: none;
float: left;
font-family: 'helveticaneuelight', Arial, sans-serif;
font-size: 9px;
color: #fff;
}   

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        width:70px; 
        background:#808184; 
        position:relative;
        z-index:500; 
        margin:0 1px;
    }

    /* this is the parent menu */
    #nav li a {
display: block;
padding: 5px 5px 4px 1px;
height: 11px;
text-decoration: none;
color: #58595B;
text-align: left;
    }

    #nav li a:hover {
        color:#fff;
    }

    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#f00;
    }

    /* submenu, it's hidden by default */
    #nav ul {
        position:absolute; 
        left:0; 
        display:none; 
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
    }

    #nav ul li {
        width:70px; 
        float:left; 
    }

    /* display block will make the link fill the whole area of LI */
    #nav ul a {
display: block;
height: 15px;
padding: 4px 5px;
color: #58595B;
    }

    #nav ul a:hover {
        text-decoration:none;   
    }

    /* fix ie6 small issue */
    /* we should always avoid using hack like this */
    /* should put it into separate file : ) */
    *html #nav ul {
        margin:0 0 0 -2px;
    }

そして、これはhtmlです：

<div id="cambia">
  <div class="top_a">CHANGE UNIVERSE:</div>
  <ul id="nav">


<li><a href="#">FORME</a>
  <ul>
    <li><a href="../grandfloor/grandflooreng.html">GRANDFLOOR</a></li>
    <li><a href="../gdo/gdoeng.html">GDO</a></li>
    <li><a href="../parsi/parsieng.html">PARSI</a></li>
  </ul>         
    <div class="clear"></div>
</li>   
  </ul>
</div>

私を助けてくれる人はいますか？

4

2 に答える 2

0

あなたはハックの下にいることを試すことができます

これが実際のデモです: http://jsfiddle.net/QM73r/

...

$(document).ready(function () { 

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul').attr('style', 'display:block');
            $('ul', this).stop().slideUp(100);

        }
    );
于 2013-03-08T12:50:40.827 に答える
0

で試してくださいstop(true,true)

clearQueue パラメータに true の値が指定されている場合、キュー内の残りのアニメーションは削除され、実行されません。

$(this).stop(true,true).slideDown(100);
于 2013-03-08T11:25:33.020 に答える