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的子菜单。我已经完成了静态主菜单和子菜单。

我的小提琴链接： 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();
    })
})

在这里，您可以使用子菜单单击事件执行的任何功能，而不是发出警报，

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

2 个答案: