使用下拉菜單的jQuery切換功能遇到問題

我有一個下拉菜單，當切換顯示它的菜單項時，上下滑動。問題是，當我在菜單滑下後點擊其中一個菜單項時，它被識別爲切換，並且菜單向上滑動而不打開菜單項的鏈接。使用下拉菜單的jQuery切換功能遇到問題

HTML

<li class="dropdown"> 
      <a href="#">Carbohydrates, proteins &amp; fats</a> 
      <ul> 
       <li><a href="carbohydrates.php">Carbohydrates</a></li> 
       <li><a href="proteins.php">Proteins</a></li> 
       <li><a href="fats.php">Fats</a></li> 
      </ul> 
     </li>

下拉腳本：

$(document).ready(function() { 
    $('.dropdown').toggle(
     function() { 
      //show its submenu 
      $('ul', this).slideDown(300); 
     }, 
     function() { 
      //hide its submenu 
      $('ul', this).slideUp(300);   
     } 
    ); 

});

我會很感激任何幫助。

來源

2012-07-29 garethdn

不幸的是上述答案都沒有爲我工作。不久之後我找到了一個解決方案。

HTML

<li class="dropdown"> 
      <a class="disablelink" href="#">Carbohydrates, proteins &amp; fats</a> 
      <ul class="sub_navigation"> 
       <li><a href="carbohydrates.php">Carbohydrates</a></li> 
       <li><a href="proteins.php">Proteins</a></li> 
       <li><a href="fats.php">Fats</a></li> 
      </ul> 
     </li>

jQuery腳本

$(document).ready(function() { 
     $('.dropdown').click(function() { 
         // When the event is triggered, grab the current element 'this' and 
         // find it's children '.sub_navigation' and display/hide them 
      $(this).find('.sub_navigation').slideToggle(); 
     }); 

     $(".disablelink").click(function(e) { 
      e.preventDefault(); 
     }); 

    });

該解決方案爲我工作完美。我在e.preventDefault();中添加了停止頁面跳轉時，我點擊鏈接。

來源

2012-07-30 13:14:46 garethdn

爲什麼你單獨關閉/打開菜單項？父母<li>元素隱藏時，無論如何都會隱藏 - 爲什麼在此之後做任何事情？

我想你想要disable event bubbling。

編輯1：你過於複雜的東西。試試這個：

$(document).ready(function() { 
    $('.dropdown').toggle(); 
});

編輯2：您能否具體談談你想要什麼？如果你想要一個特定的元素，點擊後，以控制特定列表中的運動，試試這個：

$(document).ready(function() { 
    $('a.someLink').click(function() { 
     $('.dropdown').toggle(); 
    }); 
});

來源

2012-07-29 21:52:26 hohner

我不確定你的意思？我單獨關閉/打開菜單項，因爲那正是我想要做的。當你說「爲什麼在此之後做任何事情」時，我不知道你指的是什麼？ – garethdn 2012-07-29 22:02:36

看看我的編輯 – hohner 2012-07-29 22:04:04

我試過這個代碼，但它似乎隱藏了我的列表項 - 帶有class =「dropdown」的那個。 – garethdn 2012-07-29 22:09:25

嘗試移動下拉項

<a href="#" class="dropdown">Carbohydrates, proteins &amp; fats</a> 
<div class="divdropdown"> 
    <ul> 
     <li><a href="carbohydrates.php">Carbohydrates</a></li> 
     <li><a href="proteins.php">Proteins</a></li> 
     <li><a href="fats.php">Fats</a></li> 
    </ul> 
</div>

然後外觸發鏈接稍微修改你的jquery

$(document).ready(function() { 
    $('.dropdown').toggle(
     function() { 
      //show its submenu 
      $('ul', $(".divdropdown")).slideDown(300); 
     }, 
     function() { 
      //hide its submenu 
      $('ul', $(".divdropdown")).slideUp(300);   
     } 
    ); 
});

來源

2012-07-29 21:58:18

使用下拉菜單的jQuery切換功能遇到問題

回答

相關問題