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

我想要的是打开菜单点击然后保持打开状态，即使我们在subMenu列表中选择了一个元素。现在，如果我选择菜单列表中的某个项目，它仍会保持打开状态，但如果我单击子菜单列表中的项目并将鼠标移出它，则不会显示该项目。

当我选择子项“Extourneécritureanté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;

    });
});

Answer 2

你可以尝试这个：

首先在id="top_navigation"

中创建nav

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');
        },
        function() {
            $('ul', this).slideUp('fast');
        }
    );
});

DEMO HERE

这应该有效......

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

2 个答案: