使用 Jquery 显示默认选择的 CSS 菜单项

Question

我使用 CSS 和 HTML 创建了一个菜单栏。菜单栏也包含子菜单。

我可以在悬停主菜单项等时显示菜单项。但现在我需要菜单项 2（或一个菜单项），默认情况下为 hovered/selected，（只要页面loads) 及其相关的子菜单项也默认显示。请指导我完成同样的事情。

我尝试使用 Jquery 在第一项上添加 class :

$(document).ready(function(){
  $("get the id of the menu item").click(function(){
       $(this).parent().find("id of the menu item").addClass('class to be added');   
  }); //but what should be written in the class so that menu item is active and its sub menu items are shown by default

});

HTML代码：

<ul id="menu-main" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="#">Test1</a></li>
  <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="#">Test2</a>
<ul class="sub-menu">
 <li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="#">Sub Menu1</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="#">Test3</a>
<ul class="sub-menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">S1</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="#">S2</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#">S3</a></li>
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="#">S4</a></li>
<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="#">S5</a></li>
</ul>
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#">Test4</a></li>
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="#">Test5</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="#">Test6</a></li>
</ul>

和 CSS :

ul.sub-menu{position:relative;
z-index:40;}
ul#menu-main ul {
display: none;
}

ul#menu-main li:hover > ul {
display: block;background-color: red;
} ul#menu-main {



position: relative;
display:inline-table;
top: 42px;
position: relative;
float:right;
margin-bottom: 0px;
clear: both;
padding: 0 0 0 20px;
background: transparent!important;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
font-size: 18px;
}
 ul#menu-main:after {
 content: ""; clear: both; display: block;
}
ul#menu-main li {
float: left;
line-height: 60px;
z-index: 40;
margin-left: 15px;
}

 ul#menu-main li a:hover {
    color: #fff;
background: #f29919;

}
ul#menu-main ul li{ border-bottom:1px solid #eee;}
ul#menu-main ul li a:hover {
color: #818181;
background: #eee;

}


ul#menu-main li a {
display: block;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
padding: 0 20px;
color: #818181;
text-decoration: none;
}
ul#menu-main ul {
border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul#menu-main ul li {
float: none; 

position: relative;
list-style:none;
/*width: 180px;*/
line-height: 37px;
margin-left: 0px;
}ul#menu-main ul li:first-child{border-top: 1px solid white;}

ul#menu-main ul ul li a:hover {
color:white;
}

ul#menu-main ul ul {
position: absolute; left: 100%; top:-1px;
}
ul#menu-main li.current-menu-item > a{
color: #fff;
}


ul#menu-main ul ul li:hover a{
color: #333333;
}

Answer 1

你真的需要 jQuery 吗？

您的菜单在悬停时打开，让我们找到打开菜单的部分：

ul#menu-main li:hover > ul {
  display: block;background-color: red;
}

然后在此处添加另一个 class 以激活它：

ul#menu-main li:hover > ul,
ul#menu-main li.menu-item-active > ul {
  display: block;background-color: red;
}

将新添加的menu-item-activeclass添加到我们要激活的元素中：

<li id="menu-item-25" class="menu-item menu-item-active menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="#">Test2</a>
  <ul class="sub-menu">
     <li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="#">Sub Menu1</a></li>
  </ul>
</li>

当您加载页面时，该元素将处于活动状态。

但是您可能希望在用户将鼠标悬停在其他元素上时删除此 class，因此我们将在此处添加一些 jQuery:

$('ul#menu-main li:not(.menu-item-active)').hover(function() {
    $('.menu-item-active').removeClass('menu-item-active');
});

这是一个有效的 fiddle：http://jsfiddle.net/LL3a55b3/

Answer 2

This hover show sub-menu

Use hover Link

and This click show sub-menu

Use click Link

Answer 3

在页面加载时，浏览器将解析您的 HTML，构建页面并将任何 css 添加到 HTML 元素。所以你不需要 JQuery，HTML 中的 class 和一些 css 声明将实现你想要的。

向您希望显示的菜单项添加 class：

<ul class='sub-menu menu-shown-on-load'>
</ul>

使用这个 css:

.menu-shown-on-load {
    background-color: #ff0;
}
.menu-shown-on-load .menu-item {
    background-color: #ff0;
}

其中 background-color: #ff0; 可以是提供所选效果所需的任何样式。

使用 Jquery 显示默认选择的 CSS 菜单项

Show CSS menu item selected by default using Jquery

html

javascript

css

menu