单击子菜单时，使<li class =“”>处于活动状态

Question

目前我在我的信息中心使用AdminLTE模板，但是在点击第二个菜单后的第二个下拉菜单中，该菜单不会停留但是它已关闭。

当Cascade

点击后

下面是我的HTML代码。我使用codeigniter，所以我使用这个锚。

 <?php if($this->session->userdata('usergroup') == '1' or $this->session->userdata('usergroup') ==  '4') { ?>
    <li class="treeview">
      <a href="#"><i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i></a>
      <ul class="treeview-menu">
        <li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
         <li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
      </ul>
    </li>
    <?php } ?>

我想要的是在点击全票后，该菜单停留并显示页面。怎么做？

注意：默认值为<li class="treeview active">，但如何使其动态显示所有菜单。

Answer 1

如果您想在AdminLTE菜单上创建活动状态

，这是代码

var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
  return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
  return this.href == url;
}).closest('.treeview').addClass('active');

希望它会有所帮助

Answer 2

使用此

<li class="treeview ticketing-tree">
  <a href="#"><i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i></a>
  <ul class="treeview-menu">
    <li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
     <li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
  </ul>
</li>

在页面中添加以下JQuery代码

<script>
 $(document).ready(function(){
   var href = $(this).attr("href");
   var segment = href.substr(href.lastIndexOf('/') + 1);
   if(segment == 'Ballticket'){
      $('.ticketing-tree').addClass('active');
   }
 }
</script>

Answer 3

在参考网站上，您可以看到您实际缺少的内容......

在此处点击您需要添加活动类

的子菜单

Answer 4

$(document).ready(function() {
    var url = window.location;
    // Will only work if string in href matches with location
    $('.treeview-menu li a[href="' + url + '"]').parent().addClass('active');
    // Will also work for relative and absolute hrefs
    $('.treeview-menu li a').filter(function() {
        return this.href == url;
    }).parent().parent().parent().addClass('active');


});

Answer 5

我正在使用

<li class="treeview <?php if($page == 'YourPage'){echo 'active';}?>" >
    <ul class="treeview-menu">
        <li></li>
        <li></li>
    </ul>
</li>

这是我的项目中的工作。 $page在您显示的页面中是可变的。