Question

我有菜单，当选择特定菜单项时会突出显示。现在问题出现在菜单中有子项目时。我想选择父项和菜单的子项。任何人都可以帮助我。

下面是我用来突出显示菜单的html和javascript。

 <ul class="sidebar-menu">
        <li class="header">MENU OPTIONS</li>

       <li><a onclick="getView(this,"menu","title");" title="First" menu="First" url="Folder/First" href="#"><i class="fa fa-book"></i><span>First Page</span></a></li>

       <li><a onclick="getView(this,"menu","title");" title="Second" menu="Second" url="Folder/Second" href="#"><i class="fa fa-bell"></i><span>Second Page</span></a></li>



      <li class="treeview active"><a href="#"><i class="fa fa-edit"></i><span>Third Page</span><i class="fa fa-angle-left pull-right"></i></a>

<ul class="treeview-menu menu-open" style="display: block;">
    <li><a onclick="getView(this,"menu","title");" title="Child 1" menu="Child 1" url="Folder/Page" href="#"><i class="fa fa-circle-o"></i>First Child</a>
    </li>
    <li><a onclick="getView(this,"menu","title");" title="Child 2" menu="Child 2" url="Folder/Page" href="#"><i class="fa fa-circle-o"></i>Second Child</a>
    </li>

    </ul></li>

        </ul>

javascript代码：

 $(document).ready(function () {
if (localStorage.menu !== undefined) {
    $('.sidebar-menu>li').removeClass('selectedMenu');
    $(".sidebar-menu>li>a[menu='" + localStorage.menu + "']").parent().addClass('selectedMenu');
}
else {
    $(".sidebar-menu>li>a[menu='Home']").parent().addClass('selectedMenu');
}

Answer 1

试试这个

$('.treeview-menu > li>a').click( function() { 
                $(this).closest("ul").siblings('a').addClass('selectMenu');
            });

Answer 2

在您使用parent()时的代码中，您指的是父<li>。尝试将parents()与类一起使用来查询所有父项：

$(".sidebar-menu>li>a[menu='" + localStorage.menu + "']").parents('.treeview').addClass('selectedMenu');

Answer 3

这可能会让你： - ）

$("#loginerror").fadeTo(2000, 500).slideUp(500, function(){
$("#loginerror").alert('close');

ul,li, nav,a{margin:0;padding:0;}
a{text-decoration:none; font-family:helvetica; }


header h1{text-align:center;font-size:2em;border-bottom:5px solid #222; padding:.22em; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background-color: #f62459;color:#fff;}
#vertical-menu{
  margin-top:20px;
  display:inline-block;
  border-radius:5px;
  box-sizing:border-box;
  padding-left:10px;
  background:#f62459;
  margin-left:20px;
}
.main-menu {
 display:inline-block;
width:100%;
  box-sizing:border-box;
  
}
.main-menu li{
  position:relative;
  height:50px;
  box-shadow:0 -1px 0 0 #444, 0 -2px 0 0 #222;
}
.main-menu>li>a>i{
  color:#db0a5b;
  width:2em;
  height:100%;
  line-height:50px;
  text-align:left; 
}
.main-menu>li:first-child, .submenu-1>li:first-child, .submenu-2>li:first-child, .submenu-3>li:first-child{
  box-shadow:none;
}
.main-menu>li:first-child>a, .submenu-1>li:first-child>a, .submenu-2>li:first-child>a, .submenu-3>li:first-child>a{
 border-top-left-radius:5px;
  border-top-right-radius:5px;
}
.main-menu>li:last-child>a, .submenu-1>li:last-child>a, .submenu-2>li:last-child>a, .submenu-3>li:last-child>a{
 border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}

.main-menu>li>a, .submenu-1>li>a, .submenu-2>li>a,.submenu-3>li>a{
  color:#d2527f;
  background:#2a2a2a;
  line-height:50px;
  display:block;
  padding:0 1em;
 
}

 .submenu-1,.submenu-2, .submenu-3{
  position:absolute;
  white-space:nowrap;
  top:-9999px;
}
.contain-submenu>a:first-child::after{
  content:" \f054";
  padding-left:1em;
  font-family:'FontAwesome';
}
/* revealing submenus */
.main-menu>li:hover .submenu-1, .submenu-1>li:hover .submenu-2, .submenu-2>li:hover .submenu-3{
  top:0;
   left:100%;
  transition: top .5s cubic-bezier(0.380,0.820,.790,.930);
  
}

.main-menu>li:hover>a{
  color:#22af70;
}
.submenu-1 li:hover>a{
  color:#22a7f0;
}
.submenu-2 li:hover>a{
  color:#f6db7f;
}
.submenu-3 li:hover>a{
  color:#f2784b;  
}

/* Author */
article{
  text-align:left;
  margin-left:20px;
  }
article p{
  font-size:1.2em;
  color:#f33039;
}

Answer 4

你可以试试这个

$('.treeview-menu > li>a').click( function() { 
   $(this).find("ul").siblings('a').addClass('selectMenu');
 });

说明：单击菜单，它将找到下一个具有锚元素的ul并添加CSS类。

使用Jquery突出显示菜单

4 个答案: