Fatal编程技术网
  • javascript/
  • Javascript 如何阻止href链接执行slidetoggle事件

Javascript 如何阻止href链接执行slidetoggle事件

javascript jquery html

Javascript 如何阻止href链接执行slidetoggle事件,javascript,jquery,html,Javascript,Jquery,Html,如何停止我的子菜单href链接滑块切换子菜单？我只希望我的“子菜单”ul在单击其各自的链接时切换 代码笔： jQuery: $(document).ready(function() { $('.dropdown').on('click', function() { $('ul', this).slideToggle('fast'); $('#arrow', this).toggleClass('fa fa-angle-left fa fa-angle-

如何停止我的
子菜单
href链接滑块切换
子菜单
？我只希望我的“子菜单”ul在单击其各自的链接时切换

代码笔：

jQuery:

$(document).ready(function() {

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

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

    });

});
<!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>
HTML:

$(document).ready(function() {

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

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

    });

});
<!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>

}）；
管理
-->

    

  • 
东西会在这里

    • 

  • 

      

    • 

    • 

    • 

    • 

    

    • 

  • 

  • 

  • 

  • 

      

    • 

    • 

    • 

    

    • 


Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。

现在，您的单击事件会在“.dropdown”的任何子元素处触发。避免这种情况的最好方法是将触发器绑定到“.dropdown”中可见的其他元素。例如，你的链接

<a href="#"><i class="fa fa-file"></i> Forms <i id="arrow" class="fa fa-angle-left"></i></a>
编辑：更新，你想要这样的东西吗

然后只需将选择器从
”.下拉菜单“
修改为
”.下拉菜单a“

将事件绑定到li内的链接，而不是完整的li，然后使用同级菜单选择它旁边的ul

$('.dropdown>a').on('click', function () {
  $(this).siblings('ul').slideToggle('fast');
});
那没用。当您单击子链接（如“dash 1”或“dash 2”）时，当我希望它保持打开状态时，它仍会关闭菜单。感谢您的回复，请您给我举个例子，我尝试过绑定它，但似乎不起作用。。