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并使它们在点击时可见，但它不起作用。而且我很确定我的解决方案不是dinamic，目前我假设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/

Answer 2

您可以在嵌套的ul中添加css display：none，并在嵌套的li中单击用户，使ul可见。给出一个唯一的名称，以便很容易识别任何嵌套的li

Answer 3

我设法解决了这个问题。我基本上删除了以前的所有js文件并添加了这个简单的函数：

$(document).ready(function(){

$(".link").click(function(){
    $(this).siblings().show();
  });

 });

然后我向我的css添加了一个显示：none到所有创建树的包装嵌套元素：

 .wrapper-nested-el {
  display:none;
}

特别感谢Rakesh Chaudhari，他给了我小提琴的输入。

非常感谢！

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

3 个答案: