javascript - Jquery 只显示当前的父子。隐藏其他家庭

Question

有3级菜单:

jQuery("#product_cats_nav li").toggle(
    function () {
        //var current = jQuery(this).closest('.level1');
        //jQuery(current).siblings().addClass("hide");
        jQuery(this).children().removeClass("hide").addClass("show");
    },
    function () {
        jQuery(this).find("ul").removeClass("show").addClass("hide");
    }
);

.hide {
  display: none
};

.show {
  display: block
};


#top_menu ul {
  border: 1px solid red;
  background-color: lime ;
  position: absolute;
  margin: 0;
  width: 100%;
  z-index: 100;
}

#top_menu li {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
    <ul id="product_cats_nav">
        <li class="level1" menu-level="1">Level1 A
            <ul class="hide">
                <li class="level2" menu-level="2">Level2 A
                    <ul class="hide">
                        <li class="level3" menu-level="3">
                            <a  href="#">Level3 A</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li class="level1" menu-level="1">Level1 B
            <ul class="hide">
                <li class="level2" menu-level="2">Level2 B
                    <ul class="hide">
                        <li class="level3" menu-level="3">
                            <a  href="#">Level3 B</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </div>

目标:当单击某些子菜单(level2)或(level1)并激活(打开)时，关闭所有其他 level1 子菜单。当前的 js 只是将一个 block 与另一个 block 切换，但不会隐藏另一个 level1 子元素的元素在片段中，我评论了我与 sibling 的尝试......怎么解决？

Answer 1

这是您要找的吗？

jQuery("#product_cats_nav li").toggle(
    function () {
        //var current = jQuery(this).closest('.level1');
        //jQuery(current).siblings().addClass("hide");
        jQuery(this).closest('#product_cats_nav').find('ul').removeClass("show").addClass("hide");
        jQuery(this).children().removeClass("hide").addClass("show");
        
    },
    function () {
        jQuery(this).find("ul").removeClass("show").addClass("hide");
    }
);

.hide {
  display: none
};

.show {
  display: block
};


#top_menu ul {
  border: 1px solid red;
  background-color: lime ;
  position: absolute;
  margin: 0;
  width: 100%;
  z-index: 100;
}

#top_menu li {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
    <ul id="product_cats_nav">
        <li class="level1" menu-level="1">Level1 A
            <ul class="hide">
                <li class="level2" menu-level="2">Level2 A
                    <ul class="hide">
                        <li class="level3" menu-level="3">
                            <a  href="#">Level3 A</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li class="level1" menu-level="1">Level1 B
            <ul class="hide">
                <li class="level2" menu-level="2">Level2 B
                    <ul class="hide">
                        <li class="level3" menu-level="3">
                            <a  href="#">Level3 B</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </div>