0

ドロップダウン メニューに次の jquery コードがあります。

var active = 0;

   $(document).ready(function(){
    jQuery("#dropmenu ul").css({display:"none"});
    // For 1 Level
    jQuery("#dropmenu li:has(ul) a").append('');
    jQuery("#dropmenu li ul a span").text('');
    // For 2 Level
    jQuery("#dropmenu li ul li:has(ul) a").append('');
    jQuery("#dropmenu li ul li ul a span").text('');

    jQuery("#dropmenu li").hover(function(){
    if(active != 1){
    jQuery($('.active').parent()).find("ul:first").css('display', 'none');
    jQuery(this).find("ul:first").fadeIn('fast');
    active = 1;
    }
    },
    function(){
    jQuery(this).find("ul:first").fadeOut('fast');
    jQuery($('.active').parent()).find("ul:first").fadeIn('fast');
    active = 0;
    }); });

    //ACTIVATE 
    $(document).ready(function(){
        jQuery($('.active').parent()).find("ul:first").css('display', 'block');
    });

コードが想定しているのは、どの要素がクラスを持っているかを確認して確認しactive、ページが読み込まれたときにそれを表示することです。

HTML は次のようになります。

<ul id="dropmenu">
    <li><a  class="active" href="index.php">home</a>
        <ul>
            <li><a href="#">Euro 2012</a></li>
            <li><a href="#">FIA Cup</a></li>
            <li><a href="#">Previous Events</a></li>
            <li><a href="#">Event 2012-2013</a></li>
            <li class="last"><a href="#">Pre Season</a></li>
        </ul>
    </li>
    <li><a href="#" >home</a></li>
    <li><a href="#">blabl</a></li>
    <li><a href="#">dropdown</a>
        <ul>
            <li><a href="#">Euro 2012</a></li>
            <li><a href="#">FIA Cup</a></li>
            <li><a href="#">Previous Events</a></li>
            <li><a href="#">Event 2012-2013</a></li>
            <li class="last"><a href="#">Pre Season</a></li>
        </ul>
    </li>
    <!-- ... -->
</ul>

現在、ページが読み込まれるとデフォルトのドロップダウンが表示されますが、ドロップダウンメニューがない場合は他のメニュー項目にカーソルを合わせると、デフォルトのメニュー項目が表示されて非表示になり、メニュー項目にすばやく移動すると繰り返し続けますアニメーション。アニメーションの繰り返しを避けるにはどうすればよいですか? また、メニューが空のときにデフォルト メニューを表示しないようにするにはどうすればよいですか?

4

1 に答える 1

1

私はこれを破棄して、それを行うスクリプトを探します。グーグルに時間を割けばたくさんあります。ここに便利なリンクがあります:

http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus

私は個人的にこのプラグインを使用してドロップダウン メニューを作成します。

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

このプラグインでは、html と css を少し使用してドロップダウン メニューの行を作成することで、多くのことができます... プラグインは、デザインに jQuery と jQuery UI を使用します。必要に応じてカスタマイズできます。ここにリンクがあります。まだ行ったことがない場合は、jQueryUI Web サイト: http://www.jqueryui.com/themeroller

于 2012-06-26T03:34:34.497 に答える