カスタムドロップダウンメニューWordpressのjavascriptの問題

Question

私はWordPressを習っていて、ドロップダウンメニューに使用するカスタムjQuery javascriptを使用したクエリを持っています。

JavaScriptは親リンクか、ドロップダウンなど

いずれかのマウスオフ後に隠れて、ドロップダウンに若干の遅れを置くために使用されるjavascriptが私は基本的なワードプレスのテーマで通常のHTMLで素晴らしい作品ではなく、ビルです。私は紛争のない$ jのアドバイスに従いましたが、それが正しいかどうかはわかりません。

1つの問題は、親リンクのマウスオーバー時にドロップダウンメニューが永続的であることです.JavaScriptで指定された2秒後には非表示になりません。

「var menu_timer;」という行に関連している可能性があります。 custom.jsファイルの先頭にあるが、それはコードが行の上または下に動作していないことが考えられます。ファイルはのfunctions.phpにエンキューれるjavascript custom.js

jQuery(document).ready(function($) 

としてフッタに表示期待される。 custom.jsファイル内の他のすべてのJavaScriptは、プログラマが私

var menu_timer; 

jQuery(document).ready(function($) { 

    submenuPersistent(); 
    $(window).resize(function() { 
     submenuPersistent(); 
    }); 

}); 

// no conflict 
var $j = jQuery.noConflict(); 

// menu 
function submenuPersistent() { 
    if($j(window).width() >= 651) { 
     $j('#nav > ul > li .drop').hide(); 
     $j('#nav > ul > li').off('mouseenter'); 
     $j('#nav > ul > li').off('mouseleave'); 
     $j('#nav > ul > li').mouseenter(function() { 
      if($j(this).find('.drop').length != 0){ 
       clearTimeout(menu_timer); 
       $j('#nav > ul > li').not(this).find('.drop').hide(200); 
       $j(this).find('.drop').show(200); 
      } 

     }); 
     $j('#nav > ul > li').mouseleave(function() { //edit: missed the $j originally 
      if($j(this).find('.drop').length != 0){ 
       element= $j(this); //edit: missed the $j originally 
       menu_timer= setTimeout(function() { 
        element.find('.drop').hide(200); 
       },1500); 
      } 
     }); 
    } 
    else { 
     clearTimeout(menu_timer); 
     $j('#nav > ul > li').off('mouseenter'); 
     $j('#nav > ul > li').off('mouseleave'); 
     $j('#nav > ul > li .drop').show(); 
    } 
} 

にそれを与えたこと（DOC準備ラインの上方と下方例えば）ために、以下に示されているメニューコードダウンだけではないドロップを働いていますサイトはまだ開発中ですので、現時点でライブページを表示することはできません。

私は経験豊富なjavascript/WordPressユーザーからの助けに感謝します。

アイデア？

編集：これは解決されました。私は$ jの変換のカップル

Answer 1

おかげでJavaScriptのエラーをチェックするために私を促しました。私はコンソールセクションのWeb開発ツールに入り、いくつかの点で未定義の$を示していました - 特に$ {'nav> ul> li'}の$ jを見逃しました。 = $（この）;.その作業になりまし予想通り。

Answer 2

HTML

<a class="dropdown-toggle" href="#" title="Menu">Menu</a> 
<ul class="dropdown"> 
    <li><a href="#">Menu Item</a></li> 
    <li><a href="#">Menu</a></li> 
    <li><a href="#">Settings</a></li> 
    <li><a href="#">Search</a></li> 
</ul> 

ここ空想何も、右下のドロップダウンで、クリックするだけでボタンを逃しました。 CSSでドロップダウンを非表示にし、jQueryでそれを切り替えます。

CSS

.dropdown { 
    display:none; 
    position: absolute; 
    top: 100%; 
    background: #0072bc; 
    min-width: 12em; 
} 

明らかにあなたがこれをカスタマイズすることができ、重要な部分は、「表示：なし」であるドロップダウンが最初に隠されているように。

jQueryの

あり、これを行うために、よりエレガントな方法は、おそらくですが、それだけで正常に動作します。

// Dropdown toggle 
$('.dropdown-toggle').click(function(){ 
    $(this).next('.dropdown').toggle(); 
}); 

$(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
    $('.dropdown').hide(); 
    } 
}); 

コードの最初のブロックは、それがトグル（）を使用してクリックされるときに.dropdownのDIVを示し、トグルボタン、ドロップダウンを選択しています。

次の部分はオプションですが非常に役立ちます。ページの任意の場所をクリックするとドロップダウンが非表示になります。それ以外の場合は、同じリンクをクリックして開く/閉じる必要があります。これは迷惑になることがあります。

WordPressのメニュー

あなたのWordPressカスタムメニューシステムにこれをフックアップしたい場合は、それはもう少し複雑になりますが、それでも悪くありません。

のfunctions.php

まず、我々はあなたのテーマのfunctions.phpファイルに私たちのメニューを登録する必要があります。既にメニューが登録されている場合は、他のメニューの後ろに「トップ」を追加してください。

register_nav_menus(array(
    'top' => __('Top Menu', 'm1') 
)); 

メニューが登録されたので、テーマに表示する必要があります。以下のコードは、おそらくheader.phpというメニューを表示したいところです。 （あなたが親のテーマをカスタマイズしている場合は、子テーマを使用するようにしてください！）

header.phpの

<?php if (has_nav_menu('top')) : ?> 

    <nav id="top-menu" class="top-menu" role="navigation"> 
    <a href="#" class="nav-right-btn dropdown-toggle" title="Menu"><i class="icon-cog"></i></a> 
    <?php 
    $args = array(
    'theme_location' => 'top', 
    'container_class' => 'dropdown'); 
    wp_nav_menu($args); 
    ?> 
    </nav> 

<?php endif; ?> 

私はより多くのスタイリング制御のために、ここでいくつかの余分なクラスとIDを使用しましたが、それはオプションです。表示方法に応じて、CSSで調整する必要があるかもしれません。コードのためにそれだ

は、あなたがする残っている唯一のことは、あなたのメニューを作成することです。 「Appearance => Menus」に移動してメニューを作成し、「Top」の場所に設定します。

設定が完了し

！あなたはあなたのワードプレスのテーマに夢中になって、モバイルフレンドリーなドロップダウンメニューを持っています。クリスG.彼の助けに