0

Wordpress 組み込み関数を使用して作成されているトップレベルのナビゲーションがあります。次に、最上位のナビゲーションのページ ID の 1 つを取得して、その子ページのリストを作成する別の関数があります。この div を、対応するトップ メニュー項目のホバー時にスライドさせたいと思います。

<header>
...
   <nav class="clear screen">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 1,) ); ?>
   </nav>
</header>

<div id="dropdown-contain">
        <ul class="solutions-dropdown">
            <li><a href="/solutions/">By Industry</a></li>
            <li><a href="/solutions/by-module/">By Module</a></li>
        </ul>
        <?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 85;
            $args=array(
              'child_of' => $parent
            );
            $pages = get_pages($args);
            if ($pages) {
            $pageids = array();
            foreach ($pages as $page) {
                 $pageids[]= $page->ID;
            }

            $args=array(
              //'title_li' => 'Tree of Parent Page ' . $parent,
              'include' => implode(",", $pageids)
            );
            wp_list_pages($args);
            }
        ?>
</div>

#dropdown-contain がスタイル シートに隠されています。wp_nav_menu が最上位のリストを作成しているため、サブリストをネストされたリストにすることはできません。そのため、別の div として作成しました。

これが私が現時点で持っているjqueryです：

$(document).ready(function() {

    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').slideDown().clearQueue();
        $("#dropdown-contain").mouseover(function(){
            $('#dropdown-contain').stop().css('display', 'block');
        });
    });

    $("#dropdown-contain").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
    });

});

ここでの問題は、終了する前にサブナビにカーソルを合わせないと、サブナビが開いたままになることです。最上位の要素にカーソルを合わせただけで、サブ メニューにカーソルを合わせていない場合、サブ メニューは、カーソルを置いたり離したりするまで開いたままになります。だから、私はこれを含めようとしました：

$("li.page-item-6").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
});

これを含めると、サブメニューの動作が少しおかしくなりました。メニューが下にスライドし終わる前に一番上のリスト項目にカーソルを合わせて離すのが早すぎると、次にホバーすると同じポイントまでしかスライドしません。そのため、急いで数回ホバーした後、ページを更新するまでメニューのスライドが完全に停止します。

要約すると、1 つのリスト項目にカーソルを合わせて、完全に別の div のスライド ダウンをトリガーします。リスト項目または div のいずれかからマウスを離すと、メニューはぎこちなくジャンプすることなく上にスライドします。誰かが私を助けてくれたり、役立つリンクを見つけてくれたりしたら、本当に感謝しています!

4

1 に答える 1

0

このコードを試してください：

$(document).ready(function() {
    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').stop(true).slideDown();
    });

    $("#dropdown-contain, li.page-item-6").mouseleave(function(){
        $('#dropdown-contain').stop(true).slideUp();
    });
});

.stop() - 一致した要素で現在実行中のアニメーションを停止します。http://api.jquery.com/stop/

于 2012-10-29T14:51:43.800 に答える