css - :none, Display: Hover 访问后如何显示子链接

Question

我有一个子链接导航菜单，只有在父项悬停时才会显示。所以我使用了显示:无，然后是:悬停显示，我想要的是，一旦访问(单击)子链接之一，就会显示子链接菜单。

我在这里有一个 fiddle ，确保最小化 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

在点击时给父类 active 并通过 css permanent 显示 child 如果父类有那个类:

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

如果你点击 body 中的其他地方，从父类中移除 active 类，让子类消失:

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