jquery - 根据用户点击显示嵌套的 ul

Question

所以，这是我的问题:我有一个由外部源生成的 html 页面，我需要将其视为“调查”。例如，如果用户单击第一个列表的第一个元素，我们有两种选择:1) 该元素具有嵌套元素:在这种情况下，单击时必须显示该元素。 2)该元素没有嵌套元素，用户应该被重定向到其他地方。请注意，在 1° 的情况下，唯一需要显示的元素是第一个元素，它不应显示所有其他嵌套元素。

不幸的是，由于生成了 html，我无法添加任何 Id 或类，我只能使用 Css 和 Javascript/JQuery。

这是 HTML，我停在第 4 级，但可能级别可以达到 50 或更多:

<div class="multilevel-menu-body">
    <ul class="menu-body level1">
        <li class="menu level1">
            <p>Sono</p>
            <ul>
                <li class="sublevel level1">
                    <div>
                        <div class="link">
                            <a href="#">Uomo</a>
                        </div>
                        <div class="wrapper-nested-el">
                            <ul class="menu-body level2">
                                <li class="menu level2">
                                    <p>La mia età è di</p>
                                    <ul>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <a href="#">20-40</a>
                                                </div>
                                                <div class="from">
                                                    <p>20</p>
                                                </div>
                                                <div class="to">
                                                    <p>40</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <a href="/it/sample/faq">41-50</a>
                                                </div>
                                                <div class="from">
                                                    <p>41</p>
                                                </div>
                                                <div class="to">
                                                    <p>50</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="sublevel level2">
                                            <div>
                                                <div class="link">
                                                    <p>51-60</p>
                                                </div>
                                                <div class="from">
                                                    <p>51</p>
                                                </div>
                                                <div class="to">
                                                    <p>60</p>
                                                </div>
                                                <div class="wrapper-nested-el">
                                                    <ul class="menu-body level3">
                                                        <li class="menu level3">
                                                            <p>Il mio titolo di studio è</p>
                                                            <ul>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Licenza elementare</a>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Licenza media</a>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="sublevel level3">
                                                                    <div>
                                                                        <div class="link">
                                                                            <a href="#">Laurea</a>
                                                                        </div>
                                                                    </div>                                                                          
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <p>anni</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="sublevel level1">
                    <div>
                        <div class="link">
                            <a href="#">Donna</a>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

我试图编写一些脚本来隐藏所有嵌套的 div 并使它们在单击时可见，但它不起作用。而且我很确定我的解决方案不是动态的，目前我假设 level1 只有 2 个问题，但如果再添加一个问题，它将不再有效。

JS:

$( document ).ready(function() {
  $(".sublevel.level1 ul li").children().css("display", "none");

  var currentNode;

  $(".menu.level1 .sublevel.level1").eq(0).mouseup(function(){
    $(".menu.level1 .sublevel.level1").eq(1).hide();

  if($(".menu.level1 .sublevel.level1").children().find("> .wrapper-nested-el")){
    currentNode = $(currentNode).children().find("> .wrapper-nested-el");
    currentNode.css("display", "");
  }     

  $(".menu.level1 .sublevel.level1").eq(1).mouseup(function(){
    $(".menu.level1 .sublevel.level1").eq(0).hide();
  });
});

对于复杂性，我深表歉意，我是 Javascript 的新手，而且我几乎被困在这件事上。

提前致谢

Answer 1

您需要对代码进行以下更改

CSS

.sublevel {
  display: none;
}

JS

$(document).ready(function(){
  $(".menu").click(function(){
    $(this).find('> ul > li.sublevel').show();
  })
})

演示 - https://jsfiddle.net/2uLv6upw/1/