Question

我有一个包含子菜单项的垂直菜单如果当前正在查看子菜单页面，我想打开菜单，向用户显示他所在的页面。

我想我需要在js中这样做，但不知道我的js是如何废话....

这是一个WordPress菜单，所以这里是菜单输出：

<div id="menu">
<div class="menu-webshop-menu-container">
    <ul id="menu-webshop-menu" class="menu">
        <li id="menu-item-210" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-210">
            <a href="#">Menu 1</a>
            <ul class="sub-menu selected">
                <li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-203" style="">
                    <a href="http://www.domain.com/woocommerce/product-categorie/clothing/">Clothing</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

这个js创建了子菜单的打开和关闭：

<div id="menu">
    <?php wp_nav_menu( array( 'theme_location' => 'webshop-menu') ); ?>
</div>
<script>
jQuery(document).ready(function($){
    $("#menu > div > ul > li > a").click(function (e) { // binding onclick
        if ($(this).next(".sub-menu").hasClass('selected')) {
            $("#menu .selected ul").slideUp(100); // hiding popups
            $("#menu .selected").removeClass("selected");
        } else {
            $("#menu .selected ul").slideUp(100); // hiding popups
            $("#menu .selected").removeClass("selected");
            if ($(this).next(".sub-menu").length) {
                $(this).next(".sub-menu").addClass("selected"); // display popup
                $(this).next(".sub-menu").children().slideDown(200);
            }
       }
       e.stopPropagation();
   }); 
});
</script>

我认为我不能用css做这个，因为js在点击时会在子菜单中添加一个类。所以在点击之前该类不存在。

微米。

垂直菜单：检查是否选择了子页面以打开菜单

0 个答案: