Question

我有一个这样的树列表： -

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


        });
        }
        );

如何实现上面树视图的展开/折叠？会有很多层次。提前谢谢。

Answer 1

你可以使用这样的东西

$('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

展开折叠树

1 个答案: