javascript - 展开折叠树

标签 javascript php jquery html css

我有一个像这样的树列表:-

<ul class="firstLevel">
  <li class="category"> <a href="level1.php">Level 1</a> 
     <ul>
        <li class="category"> <a href="level2.php">Level 2</a>
           <ul>
              <li class="category"><a href="level3.php">Level 3</a>
                <ul>
                  <li><a href="level4.php">Level 4</a></li>
                </ul>
              </li>
           </ul>
       </li>
       <li class="category"><a href="level2a.php">Level 2 a </a></li>
    </ul>
  </li>
</ul>

问题是,当我将一个类分配给 <li> 时然后页面重新加载,分配的CSS将消失,因为它会转到另一个页面(我不会在这个页面使用ajax,它是在系统中完成的页面,更改它将会改变许多其他部分,因此现在将不得不重新加载整个页面)。

下面是我的js:-

$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$("ul.firstLevel li a").css("display", "block");


        $('li.category').each(
            function(column) {
            $(this).click(function(event){

                if($(this).is('.plusimageapply')) { 
                //collapse other category and expand its children. 
                   $('li.category').children().hide();

                } else { 
                    $(this).children().hide();
                    $(this).removeClass('minusimageapply');
                    $(this).addClass('plusimageapply');
                }


        });
        }
        );

如何实现上面 TreeView 的展开/折叠?会有很多层次。预先感谢您。

最佳答案

你可以使用这样的东西

$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$("ul.firstLevel li a").css("display", "block");


$('li.category > a').click(function(e){
   e.preventDefault();
   e.stopPropagation();
   if($(this).hasClass('minusimageapply')) { 
      //collapse other category and expand its children. 
      $(this).next('ul').hide();
      $(this).removeClass('minusimageapply').addClass('plusimageapply');
   } else { 
      $(this).next('ul').show();
      $(this).removeClass('plusimageapply').addClass('minusimageapply');
   }
});

Working Demo

关于javascript - 展开折叠树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34228354/

相关文章:

javascript - 如何从 AJAX 响应数据渲染 Kendo UI 网格?

jquery - Ajax json 到 MVC5 Controller : Passing object containing a collection

javascript - 带直接数字输入的范围 slider

javascript - 如何在 ibm worklight 中创建 In app browser

javascript - 从 foreach 创建动态 JSON

javascript - Node.js 不连接 MySQL, PHPMyAdmin

javascript - 带有 bootstrap-slider-rails 的 rails

javascript - 搜索文本框的 XSS 脚本

javascript - 悬停弹出菜单不适用于导航子链接

java - 如何使用Codeigniter 3从java网站获取Json数据?