1

私は現在、ASP.NET Web ページを開発していますが、これまでに遭遇した中で最も苛立たしい問題に遭遇しました。

私は過去 3 日間この問題を調査してきましたが、解決策はおろか、この問題を抱えている人さえ見つけることができません。

HTML/CSS を使用してメニュー/サブメニューを作成し、サブメニューに何らかのトグル効果を追加して、スライドダウンまたはフェードインします (両方を試しましたが、両方とも同じ結果が得られます)。

Internet Explorer では、うまく機能します。メニューにカーソルを合わせると、正しくスライドダウンまたはフェードインし、マウスを離すと消えます。

Chrome/Firefox では、私はそれほど幸運ではありません。サブメニューは最初は隠れていて、一度カーソルを合わせると表示されます。マウスを離すと、すぐに閉じてから、自動的に再び開きます。この時点で、取り返しがつきません。カーソルを合わせると消え、マウスを離すと再び表示されます。これは、ページがリロードされるまで発生し続けます。

ここにHTMLのメニューがあります...

<ul id="menu">
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="Services.aspx">Services</a>
            <ul id="submenu">
                <li>Custom CRM</li>
                <li>Website Development</li>
            </ul>
        </li>
        <li><a href="About.aspx">About</a></li>
        <li><a href="Contact.aspx">Contact Us</a></li>
    </ul>

このメニューにかかるCSSは、これで...

#menu
{
    padding:0;
    text-align: center;
    margin: 0;
    width: 100%;
}

#menu li 
{
    height: 35px;
    float: left;
    list-style: none;   
    width: 25%;
    font-size: larger;
    cursor: pointer;
    position: relative;

}

#menu li a 
{
    display: block;
    height: 35px;
    text-decoration: none;
    color: White;
    font-weight: bold;
    padding-top: 5px;

}

#menu li:hover 
{
    background-color: #4CC417;
}



#menu li:hover ul 
{
    display: block;
}

#menu ul 
{
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 999;
  top: 36px;
  width: 140%;
  display: none;
  list-style: none;
  left: 0;
}

#menu ul li 
{
    text-align: left;
    font-size: medium;
    width: auto;
    float: none;
    background-color: #387C44;
    color: White;
    font-weight: bold;
    padding-left: 5px;

}

#submenu ul 
{
    display: none;
    z-index: 999;

}

#submenu 
{
    display: none;
}

そして最後に、これが私が作成した JQuery コードです...

<script type="text/javascript">

    $(document).ready(function () {
        $("#menu ul").parent().hover(function () {
            $("#submenu").stop(true, true).fadeToggle("slow");
        });
    });

</script>

どんな助けでも大歓迎です。ありがとうございました！

- マーク

4

2 に答える 2

0

http://jsfiddle.net/9LEMZ/3/

これはあなたの後ですか？（そうでない場合は、お気軽に私をさらに案内してください！）

jquery を完全に変更してサブ要素をフェードインし、最初はサブメニューを非表示にしました。また、これを支援するために css から display:none を削除しました (.hide() で非表示になったため)。

乾杯、

于 2012-07-30T20:24:25.763 に答える
0

主に、hover2 つの関数パラメーターを受け入れます (1 つはマウスオーバー用、もう 1 つはマウスアウト用)。次に、次の使用をお勧めしonます。

$('#menu > li').on({
  mouseover: function() {              
    $(this).children('ul').slideDown(300);
  },
  mouseout: function() {
    $(this).children('ul').stop(true, false).hide();
  }
});

lijQuery のチェックとバランスにより、 child がない場合に返されulます。

于 2012-07-30T19:27:03.147 に答える