使用后退按钮隐藏show li子元素

时间：2018-05-08 20:10:23

标签： jquery html list

我正在尝试创建一个用户可以点击并向下钻取的菜单。用户可以在back元素的帮助下钻回到父元素。带有子元素的li元素前面加上>，因此用户将知道子元素可用。 >独立于li父文字。下面是我到目前为止提出的代码。

＆＃13;
＆＃13; 
$(function() {
        $("li ul").hide();
        $(".backText").hide();
        //$("body > ul > li").each(function () {
        //    var kids = $(this).children("ul").length;
        //    if (kids > 0) {
        //        $('<span class="">SUB</span>').insertAfter($(this).find('a').first());
        //    }
        //});
        var currentChildLevel;
        var previousLevel;
        var isAChild; //means it belongs to parent li

        $("li ul").hide();
        $("li > a + ul").prev("a").after('&nbsp;&nbsp;&nbsp;<span class="children"> > </span>');

        $("li a").click(function () {
            console.log($(this).text());
        });
        
        $("span.children").on('click', function() {
            //set parent text
            var parentText = $(this).prev("a").text();
            
            //hide other li
            $("li").hide();

            //show clicked as a back button
            $(".backText").text(parentText).show();

            //show uls under clicked parent
            $(this).siblings('ul').slideToggle();

            //$(this).parent().show();
            //$(this).siblings('li').show();
            //console.log(parentText);
            //currentChildLevel = $(this).closest("ul");
            //console.log($(this).next('ul'));
            //this exposes ul elements
            //$(this).siblings('ul').first().slideToggle();
        });
    });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        ul {
            width: 400px;
        }
    </style>
</head>
<body>
    
<div class="backText"></div>
<ul>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Tea</a>
        <ul>
            <li><a href="#">Black tea</a></li>
            <li><a href="#">Green tea</a>
                <ul class="test">
                    <li><a href="#">Black b</a></li>
                    <li><a href="#">Black c</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Tea9000</a>
        <ul>
            <li><a href="#">Black tea</a></li>
            <li>
                <a href="#">Green tea</a>
                <ul class="test">
                    <li><a href="#">Black b</a></li>
                    <li><a href="#">Black c</a></li>
                </ul>
            </li>

        </ul>
    </li>
    <li>
        <a href="#">Tea 777</a>
        <ul>
            <li><a href="#">Black tea</a></li>
            <li>
                <a href="#">Green tea</a>
                <ul class="test">
                    <li><a href="#">Black b</a></li>
                    <li><a href="#">Black c</a></li>
                </ul>
            </li>

        </ul>
    </li>
    <li>
        <a href="#">Tea 1122</a>
        <ul>
            <li><a href="#">Black tea</a></li>
            <li>
                <a href="#">Green tea</a>
                <ul class="test">
                    <li><a href="#">Black b</a></li>
                    <li><a href="#">Black c</a></li>
                </ul>
            </li>

        </ul>
    </li>
    <li><a href="#">Milk</a></li>
</ul>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我添加了这一行$(this).siblings('ul').slideToggle();，应该在用户点击>之后运行，并且它应该公开子uls，但它不起作用。

任何人都知道怎么做。

1 个答案:

答案 0 :(得分：2)

您应该仅使用ul隐藏孩子li在父母$(this).parent().siblings().find('ul').hide();兄弟姐妹中，而不是隐藏所有li，其结果会隐藏li你试图展示的ul。

更改此

//hide other li
$("li").hide();

到这个

$(this).parent().siblings().find('ul').hide();

见下面的演示

$(function() {
  $("li ul").hide();
  $(".backText").hide();

  var currentChildLevel;
  var previousLevel;
  var isAChild; //means it belongs to parent li

  $("li ul").hide();
  $("li > a + ul").prev("a")
    .after('<i class="fas fa-level-down-alt children"></i>')
    .after('<i class="fas fa-level-up-alt parent"></i>');

  $("i.children").on('click', function() {

    //set parent text
    var parentText = $(this).prev("a").text();

    //hide other li
    $(this).parent().siblings().hide();

    //show clicked as a back button
    $(".backText").text(parentText).show();

    //show uls under clicked parent
    $(this).siblings('ul:first').show();

  });

  $("i.parent").on('click', function() {
    var parentUl = $(this).closest('ul');
    var backText = $(this).closest('ul').parent('li').find('a:first').text();
    if (backText == '') {
      //show clicked as a back button
      $(".backText").hide();
    } else {
      //show clicked as a back button
      $(".backText").text(backText);
    }
    parentUl.children().show().find('ul').hide();
  });

});
span.children,
span.parent {
  color: red;
  cursor: pointer;
  font-weight: 12px;
}

ul {
  width: 400px;
  margin: 0;
  padding: 0;
}

li ul {
  padding-left: 10px;
}

li {
  margin: 0;
  list-style-type: none;
  padding: 10px;
}

.children,
.parent {
  padding: 10px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="backText"></div>
<ul>
  <li><a href="#">Coffee</a></li>
  <li><a href="#">Tea</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li><a href="#">Green tea</a>
        <ul class="test">
          <li><a href="#">Black b</a></li>
          <li><a href="#">Black c</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Tea9000</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li>
        <a href="#">Green tea</a>
        <ul class="test">
          <li><a href="#">Black b</a></li>
          <li><a href="#">Black c</a></li>
        </ul>
      </li>

    </ul>
  </li>
  <li>
    <a href="#">Tea 777</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li>
        <a href="#">Green tea</a>
        <ul class="test">
          <li><a href="#">Black b</a></li>
          <li><a href="#">Black c</a></li>
        </ul>
      </li>

    </ul>
  </li>
  <li>
    <a href="#">Tea 1122</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li>
        <a href="#">Green tea</a>
        <ul class="test">
          <li><a href="#">Black b</a></li>
          <li><a href="#">Black c</a></li>
        </ul>
      </li>

    </ul>
  </li>
  <li><a href="#">Milk</a></li>
</ul>

EDIT

我已更新上面的脚本，以便您可以向下钻取并返回树，并且在向下钻取时只能看到当前树。希望这能解决问题。

相关问题
最新问题