如何阻止執行slidetoggle事件的href鏈接

如何阻止我的sub-menu sliderefoggling sub-menu？我只想讓我的'子菜單'ul在各自鏈接被點擊時切換？如何阻止執行slidetoggle事件的href鏈接

Codepen：http://codepen.io/anon/pen/OPVRxq

的jQuery：

$(document).ready(function() { 

    $('.dropdown').on('click', function() { 
     $('ul', this).slideToggle('fast'); 

     $('#arrow', this).toggleClass('fa fa-angle-left fa fa-angle-down'); 

    });

HTML：

}); 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Admin</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.min.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.min.css" /> 
    --> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/reset.css"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> 
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <script src="js/js.js"></script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="sidebar"> 

     <nav> 
      <ul> 
       <li class="nav-header"> 
        Stuff will be in here 
       </li> 
        <li class="dropdown"> 
         <a href="#"><i class="fa fa-tachometer"></i> Dashboards <i id="arrow" class="fa fa-angle-left"></i></a> 
         <ul class="sub-menu"> 
          <li><a href="#">Dash 1</a></li> 
          <li><a href="#">Dash 2</a></li> 
          <li><a href="#">Dash 3</a></li> 
          <li><a href="#">Dash 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#"><i class="fa fa-bar-chart"></i> Graphs</a></li> 
        <li><a href="#"><i class="fa fa-inbox"><span class="inbox-number">11</span></i> Mailbox</a></li> 
        <li><a href="#"><i class="fa fa-rocket"></i> Widgets</a></li> 
        <li class="dropdown"> 
         <a href="#"><i class="fa fa-file"></i> Forms <i id="arrow" class="fa fa-angle-left"></i></a> 
         <ul class="sub-menu"> 
          <li><a href="#">Form 1</a></li> 
          <li><a href="#">Form 1</a></li> 
          <li><a href="#">Form 1</a></li> 
         </ul> 
        </li> 

      </ul> 
     </nav> 

    </div> 


     <div id="admin-top-grey-bar"> 
      <div class="green-menu-button"><i class="fa fa-bars"></i></div> 
      <input type="text" class="search" placeholder="Search for something..."> 
     </div> 
    <div id="main-area-wrapper"> 
     <div class="text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
    </div> 
</div>

來源

2014-11-25 ifusion

綁定事件到貴麗裏面的鏈接，而不是完整的禮，然後用兄弟姐妹來選擇UL旁邊

$('.dropdown>a').on('click', function() { 
    $(this).siblings('ul').slideToggle('fast'); 
});

來源

2014-11-25 05:26:46 marioivangf

完美的，工作的一種享受！謝謝！ – ifusion 2014-11-25 05:37:19

眼下您的點擊事件會觸發'.dropdown'的任何子元素。避免這種情況的最好方法是將觸發器綁定到可見的'.dropdown'內的其他元素。例如 - 你的鏈接。

<a href="#"><i class="fa fa-file"></i> Forms <i id="arrow" class="fa fa-angle-left"></i></a>

或者您可以通過jquery：not（）禁用隱藏的ul上的事件。但我認爲這不是一個好的做法。

$('.dropdown:not(ul)').on(...)

來源

2014-11-25 04:57:43 UtherTG

謝謝對於你的答覆，你可以請給我一個例子，我試圖綁定它，但它似乎沒有工作.. – ifusion 2014-11-25 05:07:49

編輯：更新demo，你想要類似的東西？

然後只需修改從'.dropdown'選擇到'.dropdown a'

來源

2014-11-25 05:00:31 mido

這沒有奏效。當你點擊子鏈接，例如'dash 1'或'dash 2'時，它仍然會關閉菜單，當我希望它保持打開。 – ifusion 2014-11-25 05:04:07

如何阻止執行slidetoggle事件的href鏈接

回答

相關問題