html - CSS JSP - 下拉菜单在子菜单焦点上保持打开

Question

我想为网站创建一个垂直菜单。它工作得很好，但我仍然对以下代码有疑问:

JSP:

<nav>
    <ul>
        <li><a href="#"> Saisie assistée (schémas prédéfinis) </a></li>
        <li> <a href="#">Saisie libre </a></li>
        <li> <a href="#">Extourne ou annulation écriture </a>
            <ul ">
                <li> <a href="#">Annulation écriture jour validé</a></li>
                <li> <a href="#">Extourne écriture antérieure </a></li>
            </ul>
        </li>
        <li> <a href="#">Consultations/Editions </a>
            <ul >
                <li> <a href="#">Lots à valider</a></li>
                <li> <a href="#">Lots antérieurs comptabilisés </a></li>
                <li> <a href="#">Listes des schémas habilités </a></li>
                <li> <a href="#">Listes des comptes habilités </a></li>
            </ul>
        </li>
        <li> <a href="#">Paramètrage/Administration </a>
            <ul >
                <li> <a href="#">Entités habilitées</a></li>
                <li> <a href="#">Collaborateurs habilités </a></li>
                <li> <a href="#">Habilitations Entité / Comptes </a></li>
                <li> <a href="#">Habilitations Entité / Schémas </a></li>
                <li> <a href="#">Paramétrages Schémas </a></li>
                <li> <a href="#">Import et Export Excel </a></li>
            </ul>
        </li>

    </ul>
</nav>

CSS:

nav {
       width:300px;
}

nav ul {
       list-style:none;
       margin:0;
       padding:0;

}

nav ul li {

       position:relative;
       background-color: #d23070;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       margin-bottom: 5px;
}

nav ul li:hover,
nav ul li:FOCUS {
       position:relative;
       background-color: #3968ab;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       margin-bottom: 5px;
}

nav a {
       color:#e8e8e8;
       padding:12px 0px;
       display:block;
       text-decoration:none;
       font-family:tahoma;
       font-size:13px;
       text-transform:uppercase;
       padding-left:20px;
}

nav a:HOVER,
nav a:FOCUS {
       background-color:#3968ab; 
       color:#ffffff;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
}

nav ul li ul{
       background-color:#3968ab; 
       color:blanc;
       border: 1px solid;
       border-top-right-radius: 0.5em;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
}

nav a:focus ~ ul{
       display:block;
       border: 1px solid;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       background:#f1f1f1;
       padding-top: 10px;
}

nav ul li ul:hover {
       display:block;
       border: 1px solid;
       border-top-left-radius: 0.5em;
       border-bottom-right-radius: 0.5em;
       border-bottom-left-radius: 0.5em;
       background:#f1f1f1;
       padding-top: 10px;
}

nav ul ul {
       position:relative;
       left:0px;
       top:0px;
       border-top:1px solid #e9e9e9;
       display:none;
}
nav ul ul li {
       width:296px;
       background:#f1f1f1;
       border:0.5px solid #e9e9e9;
       border-top:0;
}
nav ul ul li a {
       color:#3968ab; 
       font-size:12px;
       text-transform:none;
}
nav ul ul li a:hover {
       color:#ffffff;
}

我想要的是在单击时打开菜单然后保持打开状态，即使我们选择了子菜单列表中的一个元素。现在，如果我选择菜单列表中的一个元素，它会保持打开状态，但如果我单击子菜单列表中的一个元素并将鼠标移出它，它就不会打开。

这就是我在选择子菜单“Extourne écriture antérieur”的元素时想要的(焦点)。

但是当子菜单没有悬停时，它会自行关闭。 (所以我必须将鼠标放在上面才能保持打开状态)。即使它没有悬停，我怎样才能让它保持打开状态？

编辑:我坚持在未通过鼠标悬停时保持打开带有选定元素的子菜单。这对我来说是真正的问题......

Answer 1

为此，我相信您需要一些 javascript。

首先，您将在 CSS 中创建一个样式，该样式可以添加到子 ul 以使其保持打开状态。

ul.open {
display: block;
}

然后使用一些 jQuery，您监听一个元素的点击，当您检测到点击时，您找到 LI 的内部 UL 并将“open”类应用到它。

$(document).ready(function(){
    $("nav > ul > li a").click(function(){
        var parentLi = $(this).parent('li');
        var childUl = parentLi.children('ul');

        if (childUl.hasClass('open')) {
            parentLi.childred('ul').removeClass('open');
        } else {
            parentLi.childred('ul').addClass('open');
        }

        return false;

    });
});