使用CSS和javascript显示活动主菜单和子菜单

Question

我有左边的菜单。

<div class="panel">
    <div class="panel-heading panel-red" role="tab" id="headingDash" style="">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
            <i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
            Dashoboard
        </a>
    </div>
    <div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
        <div class="panel-body">
            <ul class="nav">
                <li class="subMenuList active" style=" ">
                    <a href="#" style="">Dashboard-1</a>
                </li>
                <li class="subMenuList" style="">
                    <a href="#" style="">Dashboard-2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我想显示活动的主菜单和子菜单。使用css和JS点击子菜单.我已经做了静态主菜单和子菜单。

我的Fiddle链接： https://jsfiddle.net/whv76xd0/6/

如何在单击时执行此动态操作？

Working Fiddle link

Answer 1

尝尝这个。

$(document).ready(function(){
    $(document).on("click", ".subMenuList", function(){
        $('.panel-heading').removeClass('panel-red');
        $('.subMenuList').removeClass('active');
      $(this).closest('.panel').find('.panel-heading').addClass('panel-red');
      $(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
      $(this).addClass('active');
    })
})

Answer 2

@pavan，如果您想处理子菜单的动态链接，请尝试使用下面的jQuery函数。

$(document).ready(function(){
    $(document).on("click",".subMenuList",function(){
      alert();
    })
})

在这里，您可以使用单击事件子菜单来执行您想要执行的任何功能，而不是您可以放置的警报。