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只是将一个区块与另一个区块进行了比较，但不会隐藏另一个级别1的孩子们的家庭 在片段中，我用兄弟姐妹评论了我的三文鱼。 怎么解决？

Answer 1

这是你在找什么？

＆＃13;

＆＃13;

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");
    }
);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;