显示：无，显示：悬停后访问后如何显示子链接

Question

我有一个子链接导航菜单，仅当父项悬停时才会显示。所以我使用了显示：无，然后是：悬停显示，我想要的是，一旦访问（单击）其中一个子链接，就会显示子链接菜单。

我这里有一个小提琴，请确保将 html 屏幕最小化，以便导航菜单不会闪烁。

https://jsfiddle.net/omq2ky0v/

        html {
        padding: 0;
        margin: 0;
      background-color: #efe;
    }

    a:link,
    a:visited {
        text-decoration: none;
    }

    /* Standard Nav Menu */
    .site-nav ul {
        margin: 0;
        padding: 0;
    }

    .site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
    .site-nav ul:after { clear: both; }
    .site-nav ul { *zoom: 1; }

    .site-nav ul li {
        list-style: none;
        display: inline-block;
    }


    .site-nav ul li a:link,
    .site-nav ul li a:visited {
        display: block;
    }


    /* Clearfix */
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }

    /* Children Links */

    .page_item_has_children:hover .children { 
    display: block;}

    .page-item:hover {text-decoration: none;}
    .children {
        display: none;
    }


    .children-links {
        margin-bottom: 20px;
        font-size: 80%;
    }

    .children-links a:link,
    .children-links a:visited {
        text-decoration: none;
        padding-bottom: 2px;
    }

    .children-links ul {
        float: left;
    }

    .children-links li {
        margin-right: 20px;
    }

    .children-links .parent-link {
        float: left;
        margin-right: 20px;
        padding-right: 20px;
        border-right: 1px solid #DDD;
        font-size: 120%;

Answer 1

你可以试试这个

.current_page_ancestor a:visited + ul.children{ display:block ！重要的; }

我也在你之前的代码中的 jsFiddle 中尝试过这个。

enter code herehttps://jsfiddle.net/omq2ky0v/8/

Answer 2

点击类active给父类，如果父类有该类，则通过css永久显示子类：

.page_item.active > .children > .page_item{
    display: block;
}

如果您单击正文中的其他位置，请从父级中删除 active 类，让子级消失：

$('document').on('mousedown', function(oEvent){
    // check if navigation is open and if one of the childs is clicked, and do stuff
    $(oEvent.currentTarget) ....
});