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 只是将一个块与另一个块相互转换，但不隐藏另一个 level1 孩子家庭的元素 在 sn-p 中，我评论了我与兄弟姐妹的尝试。 如何解决？

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>