单击子菜单时使 <li class> 处于活动状态答案

【问题标题】：Make the <li class> to be Active when click submenu单击子菜单时使 <li class> 处于活动状态
【发布时间】：2017-11-28 23:06:08
【问题描述】：

目前我正在为我的仪表板使用 AdminLTE 模板，但是对于我单击第二个菜单后的第二个下拉菜单，该菜单不会保留，而是正在关闭。

当级联时

点击后

以下是我的 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">，但如何使其对所有菜单都具有动态性。

【问题讨论】：

标签： php html css codeigniter

【解决方案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');

希望对你有帮助

【讨论】：

【解决方案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>

【讨论】：

我已经粘贴了你的 jQuery，它不会影响，仍然在顶部菜单上处于活动状态

【解决方案3】：

在参考网站上，您可以看到您实际上缺少什么...

这里点击子菜单需要添加活动类

【讨论】：

嗨@kunal 我在默认模板 AdminLTE 上看不到活动类，我也尝试添加该类，它似乎没有影响。你能告诉我正确的代码吗？

【解决方案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');


});

【讨论】：

【解决方案5】：

我正在使用

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

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

【讨论】：