javascript - 单击/激活时如何使悬停属性保持不变？

Question

如何让悬停属性在点击/激活时保持不变？

附加组件: 当其他子菜单打开时关闭子菜单。 当我想打开其他子菜单时，我想关闭子菜单。如何做到这一点？

Click Me

<div id="container">
    <nav>
        <ul>
            <li class="show-sub"><a href="#">Walk-In<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>
            </li>
            <li class="show-sub"><a href="#">Members<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>       
            </li>
            <li class="show-sub"><a href="#">Sales<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>
            </li>
            <li class="show-sub"><a href="#">Inventory<span class="sub-arrow"></span></a>    
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>
            </li>
            <li class="show-sub"><a href="#">Suppliers<span class="sub-arrow"></span></a>    
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>
            </li>
            <li class="show-sub"><a href="#">Reports<span class="sub-arrow"></span></a>    
                <ul>
                    <li><a href="#">Subscr</a></li>
                    <li><a href="#">asdasd</a></li>
                    <li><a href="#">asdasd</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

JS

$(document).ready(function(e){
    $('.show-sub').click(function(e){
        $(this).children('ul').slideToggle();
    });

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

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

.user {
    float: right;
    margin-top: 13px;
    margin-right: 20px;
}

.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 li a:focus {
    background-color: #030303;
    color: #fff;
    padding-left: 80px;
}*/

nav ul li ul {
    display: none;
    padding-left: 80px;
}

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

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

nav .sub-arrow:after {
    content: '\203A';
    float: right;
    margin-right: 20px;
}

nav .sub-arrow:hover:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

Answer 1

当您单击该元素时添加一个类并更改您的 css 以同时使用悬停和类:

nav li a:hover, .active {
    background-color: #030303;
    color: #fff;
    padding-left: 80px;
}

JS:

$('.show-sub').click(function(e){
    // This closes all active menus before opening the clicked menu
    $('.active').removeClass('active').children('ul').slideUp();

    $(this).addClass('active');
    $(this).children('ul').slideToggle();
});

*编辑为先关闭所有其他菜单