顯示/隱藏wordpress子菜單

我有一些困難，交換我的Wordpress菜單的行爲。我在尋找它時徘徊點擊顯示時，而不是：顯示/隱藏wordpress子菜單

<nav> 
    <ul> 
     <li> 
      <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?> 
     <li> 
      <br /> 
     <form method="get" id="search_form" action="<?php bloginfo('home'); ?>"> 
      <input type="text" class="text searchForm" name="s" value="Search" > 
     </form> 
    </ul> 
</nav> 

jQuery(document).ready(function ($) { 
    $(".sub-menu").hide(); 
    $(".current_page_item .sub-menu").show(); 
    $("li.menu-item").click(function() { // mouse CLICK instead of hover 
     $(".sub-menu").hide(); // First hide any open menu items 
     $(this).find(".sub-menu").show(); // display child 
    }); 
});

當我將其更改爲撥動它會殺死在菜單中的其他環節。我不知道這裏的問題是什麼...

來源

2014-11-25 user3328557

你能提供jsfiddle或其他演示嗎？ – 2014-11-25 15:04:04

這是非常棘手的，因爲它是我創建的一個自定義Wordpress模板，所以當你將鼠標懸停在菜單頭部以顯示下面的子菜單項時，它會正常工作，但是如果將其切換到切換狀態以完全切換但會殺死其他導航項。 – user3328557 2014-11-25 15:08:29

我不在代碼中說任何錯誤。必須有一些與dom結構有關的東西。沒有它，我不能說太多。 – 2014-11-25 15:21:22

你可以使用jQuery的點擊功能，而不是懸停。您還必須通過禁用超鏈接的默認行爲來確保<a>標記不起作用。

jQuery(document).ready(function ($) { 
    $(".sub-menu").hide(); 
    $(".current_page_item .sub-menu").show(); 
    $("li.menu-item").click(function() { // mouse CLICK instead of hover 
     // Only prevent the click on the topmost buttons 
     if ($('.sub-menu', this).length >=1) { 
      event.preventDefault(); 
     } 
     $(".sub-menu").hide(); // First hide any open menu items 
     $(this).find(".sub-menu").show(); // display child 
     event.stopPropagation(); 
    }); 
});

來源

2014-11-25 15:22:45

這樣幾乎是正確的，它現在顯示並快速隱藏。這可能是什麼原因？ – user3328557 2014-11-25 15:29:20

我希望菜單保持打開狀態，除非您點擊菜單中的另一個項目，然後關閉它。 – user3328557 2014-11-25 15:32:41

編輯我的答案，以反映您請求的行爲。 – 2014-11-26 09:20:47

顯示/隱藏wordpress子菜單

回答

相關問題