堆栈内存溢出
  简体   繁体   English

jQuery下拉菜单。 单击后，子菜单消失。 那么，如何在单击时使子菜单停留？

[英]Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?

 原文  2015-11-19 06:25:34  6   5    javascript/ jquery

问题描述

I'm Using jquery to show the submenu when menu(members)clicked. 单击菜单（成员）时，我正在使用jquery显示子菜单。 The toggle works when I click the Member menu and the problem is, when I click the submenu it will disappear, so I want it to stay when clicked. 当我单击“成员”菜单时，切换开关起作用，问题是，当我单击子菜单时，它会消失，因此我希望它在单击时保持不变。 How to do that in javascript?... 如何在javascript中做到这一点？ 

<html>
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e)
        {
            $('.has-sub').click(function(){
                $(this).toggleClass('tap')
            });
        });
    </script>
</head>
<body>
    <header>
        <div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div>
    </header>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Walk-In</a></li>
                <li class="has-sub"><a href="#">Members</a>             
                    <ul>
                        <li><a href="#">Subscr</a></li>
                        <li><a href="#">asdasd</a></li>
                        <li><a href="#">asdasd</a></li>
                    </ul>       
                </li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Inventory</a></li>
                <li><a href="#">Suppliers</a></li>
                <li><a href="#">Reports</a></li>
            </ul>
        </nav>
        <div id="content">
            SOME CONTENT YAY
        </div>
    </div>
</body>
</html>

CSS 的CSS 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Open Sans';
}
a{
    text-decoration: none;
}
header{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #858585;
}
.logo {
    float: left;
    margin-top: 9px;
    margin-left: 15px;  
}
.logo a{
    font-size: 1.3em;
    color: #070807;

}
.logo a span{
    font-weight: 300;
    color: #1AC93A;
}
nav{
    width: 250px;
    height: calc(100% - 50px);
    background-color: #171717;
    float: left;
}
#content {
    width: :auto;
    margin-left: 250px;
    height: calc(100% - 50px);
    padding: 15px
}
nav li{
    list-style: none;

}
nav li a{
    color: #ccc;
    display: block;
    padding: 10px;
    font-size: 0.8em;
    border-bottom: 1px solid #0a0a0a;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
nav li a:hover{
    background-color: #030303;
    color: #fff;
    padding-left: 80px;
}
nav ul li ul {
    display: none;
}
/*nav ul li:hover > ul{
    display: block;

}*/
nav ul li.tap > ul{
    display: block;
}

5 个解决方案

解决方案1
 1 已采纳  2015-11-19 06:38:53

This is because the events on child bubble up to the parent when clicked, to stop this add a click event to the child element and call e.stopPropagation() to prevent bubbling up to the parent being .has-sub : 这是因为子级事件在单击时会冒泡到父级，要停止此操作，请向子级元素添加click事件，然后调用e.stopPropagation()以防止冒泡到父级为.has-sub ： 

$(".has-sub ul").click(function(e){
    e.stopPropagation();
});

Fiddle Example 小提琴的例子

解决方案2
 0  2015-11-19 06:38:46

Add a sub class to the ul from the li 从li向ul添加一个sub类

Try: 尝试： 

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Walk-In</a>
            </li>
            <li class="has-sub"><a href="#">Members</a> 
                <ul class="sub">
                    <li><a href="#">Subscr</a>
                    </li>
                    <li><a href="#">asdasd</a>
                    </li>
                    <li><a href="#">asdasd</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sales</a>
            </li>
            <li><a href="#">Inventory</a>
            </li>
            <li><a href="#">Suppliers</a>
            </li>
            <li><a href="#">Reports</a>
            </li>
        </ul>
    </nav>
    <div id="content">SOME CONTENT YAY</div>
</div>
  $('.has-sub').click(function(e){
       if ($(e.target).parents('.sub').length == 0 ){
        $(this).toggleClass('tap');
       }
    });

jsfiddle: https://jsfiddle.net/v9ynq7og/ jsfiddle： https ://jsfiddle.net/v9ynq7og/

解决方案3
 0  2015-11-19 06:41:23

Try this. 尝试这个。 i have added id into main menu and while click check for target id and base on this you can perform appropriate action 我已将ID添加到主菜单中，同时单击以检查目标ID，并在此基础上执行适当的操作 

 $(document).ready(function(e) { $('.has-sub').click(function(e) { if (e.target.id) $(this).toggleClass('tap') }); }); 
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300); * { margin: 0; padding: 0; } body { font-family: 'Open Sans'; } a { text-decoration: none; } header { width: 100%; height: 50px; border-bottom: 1px solid #858585; } .logo { float: left; margin-top: 9px; margin-left: 15px; } .logo a { font-size: 1.3em; color: #070807; } .logo a span { font-weight: 300; color: #1AC93A; } nav { width: 250px; height: calc(100% - 50px); background-color: #171717; float: left; } #content { width: : auto; margin-left: 250px; height: calc(100% - 50px); padding: 15px } nav li { list-style: none; } nav li a { color: #ccc; display: block; padding: 10px; font-size: 0.8em; border-bottom: 1px solid #0a0a0a; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } nav li a:hover { background-color: #030303; color: #fff; padding-left: 80px; } nav ul li ul { display: none; } /*nav ul li:hover > ul{ display: block; }*/ nav ul li.tap > ul { display: block !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Dashboard</title> <body> <header> <div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a> </div> </header> <div id="container"> <nav> <ul> <li><a href="#">Walk-In</a> </li> <li class="has-sub"> <a href="#" id='id1'>Members</a> <ul> <li><a href="#">Subscr</a> </li> <li><a href="#">asdasd</a> </li> <li><a href="#">asdasd</a> </li> </ul> </li> <li><a href="#">Sales</a> </li> <li><a href="#">Inventory</a> </li> <li><a href="#">Suppliers</a> </li> <li><a href="#">Reports</a> </li> </ul> </nav> <div id="content"> SOME CONTENT YAY </div> </div> </body> </html>

解决方案4
 0  2015-11-19 06:50:48

I think you are looking for this... 我想您正在寻找... 

  $(document).ready(function(e) { $('.test').click(function(e){ if($(this).hasClass("test1")) { e.stopPropagation(); }else { $(this).toggleClass('tap'); } }); }); 
 **CSS** @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300); *{ margin: 0; padding: 0; } body { font-family: 'Open Sans'; } a{ text-decoration: none; } header{ width: 100%; height: 50px; border-bottom: 1px solid #858585; } .logo { float: left; margin-top: 9px; margin-left: 15px; } .logo a{ font-size: 1.3em; color: #070807; } .logo a span{ font-weight: 300; color: #1AC93A; } nav{ width: 250px; height: calc(100% - 50px); background-color: #171717; float: left; } #content { width: :auto; margin-left: 250px; height: calc(100% - 50px); padding: 15px } nav li{ list-style: none; } nav li a{ color: #ccc; display: block; padding: 10px; font-size: 0.8em; border-bottom: 1px solid #0a0a0a; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } nav li a:hover{ background-color: #030303; color: #fff; padding-left: 80px; } nav ul li ul { display: none; } /*nav ul li:hover > ul{ display: block; }*/ nav ul li.tap > ul{ display: block; } 
 <html> <head> <title>Dashboard</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <header> <div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div> </header> <div id="container"> <nav> <ul> <li><a href="#">Walk-In</a></li> <li class="has-sub test"><a href="#">Members</a> <ul> <li><a href="#" class='test test1'>Subscr</a></li> <li><a href="#" class='test test1'>asdasd</a></li> <li><a href="#" class='test test1'>asdasd</a></li> </ul> </li> <li><a href="#">Sales</a></li> <li><a href="#">Inventory</a></li> <li><a href="#">Suppliers</a></li> <li><a href="#">Reports</a></li> </ul> </nav> <div id="content"> SOME CONTENT YAY </div> </div> </body> </html>

解决方案5
 0  2015-11-19 06:56:37

Need to add a jquery function. 需要添加一个jQuery函数。 

$('.has-sub ul').click(function(){
        return false
    });

Here is the jsFiddle for your requirement 这是您需要的jsFiddle

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 滚动后单击下拉菜单消失 - Drop Down Menu Disappears When Clicked After Being Scrolled 单击其他菜单时，jQuery隐藏子菜单 - jQuery hide submenu when other menu is clicked jQuery下拉菜单在单击时变黑 - jQuery drop down menu going black when clicked 单击子链接时如何停止垂直菜单的手风琴？ - How to stop accordion of vertical menu when child link is clicked.? 通过将鼠标悬停在子菜单上进行选择时，下拉菜单消失 - Drop down Menu Disappears when Selecting by Hovering over submenu 下拉式菜单。 当您将鼠标悬停在子菜单上时，子菜单会下拉 - Drop down menu. Sub menu drops down when you hover where it will appear 在下拉菜单上滚动时如何防止身体滚动？ - How to prevent body scrolling when scroll on Drop down menu.? 单击菜单时应用过渡效果以减慢子菜单的打开 - Applying transition effects to slow down opening of submenu when menu is clicked 单击提交按钮后如何保持动态生成的下拉菜单项。 - how to maintain dynamic generated drop down menu items after submit button is clicked. 当点击它之外的任何区域时，如何使用javascript / jquery隐藏此下拉菜单？ - How do I hide this drop down menu using javascript/jquery when any area outside of it is clicked?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM