html - DropDown-Menu 应在 onClick 后保持打开状态

Question

我的主页-菜单-点“软件”如果你点击它应该保持打开状态!

查看我的 Test-Homepage !

我已经测试过将“li:focus”和“li:active”添加到我的最低 CSS 标签，但没有任何效果。我也用 jQuery 尝试过，但没有成功!

HTML 代码:

<nav id="cNav">
    <div class="Nav">
        <ul>
            <li><a href="/">G</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Software</a>
                <ul>
                    <li><a href="sw/android/">Android</a></li>
                    <li><a href="sw/windows/">Windows</a></li>
                </ul>
            </li>
            <li><a href="about/">&Uuml;ber</a></li>
        </ul>
    </div>
</nav>

CSS 代码:

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.Nav {
    font-weight: bold;
    font-size: 22pt;

    margin: 0;
    padding: 0;
}

.Nav ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;

    position: relative;

    width: 100%;

    text-align: center;
}

.Nav ul li {
    display: inline-block;  
    position: relative;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.Nav ul li a {
    outline: 0;

    color: white;

    position: relative;

    text-decoration: none;

    transition: color 0.3s;
}

.Nav ul li a::after {
    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 4px;

    background: white;

    content: '';

    opacity: 0;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -moz-transition: opacity 0.3s, -moz-transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    -webkit-transform: translateY(10px);

    -moz-transform: translateY(10px);

    transform: translateY(10px);

    margin: 0;
}

.Nav ul li a:hover::after { 
    opacity: 1;

    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.Nav ul ul {
    display: none;
    white-space: nowrap;        
    position: absolute;

    text-align: center;

    top: 100%;

    margin-left: -5.3em;
}

.Nav ul ul li {     
    background-color: rgb(5, 90, 160);      
    border-top: medium solid rgba(0,115,209,1.00);

    margin-right: -1em;
}

.Nav ul li:hover > ul {
    display: block;
}

Answer 1

如果您希望您的主页-菜单-点“软件”在您单击它时保持打开状态，并且您想要使用 jQuery，这可能是一个可能的解决方案:

用软件给li加一个id:

<li id="software"><a href="/">Software</a>

然后你可以使用它来设置 ul 的 css 显示属性来阻止:

$(document).ready(function() {
    $("#software ul").click(function() {
        $(this).css("display", "block");
    });
});

片段:

$(document).ready(function() {
  $("#software ul").click(function() {
    $(this).css("display", "block");
  });
});

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.Nav {
    font-weight: bold;
    font-size: 22pt;

    margin: 0;
    padding: 0;
}

.Nav ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;

    position: relative;

    width: 100%;

    text-align: center;
}

.Nav ul li {
    display: inline-block;  
    position: relative;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.Nav ul li a {
    outline: 0;

    color: white;

    position: relative;

    text-decoration: none;

    transition: color 0.3s;
}

.Nav ul li a::after {
    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 4px;

    background: white;

    content: '';

    opacity: 0;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -moz-transition: opacity 0.3s, -moz-transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    -webkit-transform: translateY(10px);

    -moz-transform: translateY(10px);

    transform: translateY(10px);

    margin: 0;
}

.Nav ul li a:hover::after { 
    opacity: 1;

    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.Nav ul ul {
    display: none;
    white-space: nowrap;        
    position: absolute;

    text-align: center;

    top: 100%;

    margin-left: -5.3em;
}

.Nav ul ul li {     
    background-color: rgb(5, 90, 160);      
    border-top: medium solid rgba(0,115,209,1.00);

    margin-right: -1em;
}

.Nav ul li:hover > ul {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="cNav">
    <div class="Nav">
        <ul>
            <li><a href="/">G</a></li>
            <li><a href="/">Home</a></li>
            <li id="software"><a href="/">Software</a>
                <ul>
                    <li><a href="sw/android/">Android</a></li>
                    <li><a href="sw/windows/">Windows</a></li>
                </ul>
            </li>
            <li><a href="about/">&Uuml;ber</a></li>
        </ul>
    </div>
</nav>