点击父级菜单后才打开子菜单

Question

我认为我的问题之前已经被回答了很多次，但我找不到完全符合我的情况。

我有一个带有子菜单的垂直菜单，我想只在单击父菜单时显示子菜单（而不是悬停），一次只显示一个子菜单，并在单击菜单外部的某个位置后，希望子菜单消失。

这是我现在拥有的 - 它现在基于悬停。我尝试将a:hover更改为类似a:active的东西，但它效果不好（我对CSS不是很擅长）。

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    //width: 190px;
    width: 100%;
}

/* The list elements which contain the links */
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* General link styling */
#cssmenu > ul li a {
    display: block;
    position: relative;
    margin: 2;
    width: 95%;
    height: 50px;
    background-color: #abc578;
    border-left: solid 0px #ffffff;
    border-bottom: solid 1px #ffffff;
    font: 0.7em Tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding-top: 30px;
}

/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background: #82c500;
    background: -webkit-linear-gradient(bottom, #82c500, #000000);
    background: -ms-linear-gradient(bottom, #82c500, #000000);
    background: -moz-linear-gradient(bottom, #82c500, #000000);
    background: -o-linear-gradient(bottom, #82c500, #000000);
    border-color: transparent;
}

/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
    content: "";
    position: absolute;
    top: 34px;
    right: 8px;
    width: 0px;
    height: 0px;

    /* Creating the arrow using borders */
    border: 4px solid transparent;
    border-left: 4px solid #d8d8d8;
}

/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
    content: "";
    position: absolute;
    top: 35px;
    right: 8px;
    width: 0px;
    height: 0px;

    /* Creating the arrow using borders */
    border: 4px solid transparent;
    border-left: 4px solid #000;
}

/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
    border-left: 4px solid #fff;
}

#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
    border-left: 4px solid rgba(0, 0, 0, 0.3);
}

/* THE SUBMENUS */
#cssmenu > ul ul {
    position: absolute;
    left: 95%;
    width: 100%;
    top: -9999px;
    padding-left: 5px;
    opacity: 0;
    /* The fade effect, created using an opacity transition */
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
    top: -2px;
    opacity: 1;
}

有人有一些想法吗？

- kolage

---

也许这些链接会有用处： https://dev59.com/S3NA5IYBdhLWcg3wUL9Y https://dev59.com/wGYr5IYBdhLWcg3wfaSc - Andrew

Answer 1

好的，我使用以下方法解决了我的问题：如何检测元素外的点击？

现在我在网站的页脚有类似这样的东西：

 $('html').click(function() {
     hideSubMenu();
 });

 $("#cssmenu").click(function(event){
     event.stopPropagation();
 });

当我点击子菜单时，调用子菜单函数显示子菜单：

<div id='cssmenu'>
<ul>
    <li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
    ...

- kolage