我正在尝试使用css菜单。单击具有子项的主菜单项时,菜单将展开以显示子项。菜单效果很好,除了一件事。单击包含子项的主菜单项时,它将不会打开请求的链接。它只会扩展菜单。如何编辑jquery,如果主菜单项有一个href菜单将展开并打开主菜单项的链接?
这是代码。
这是我正在使用的代码......
$(document).ready(function(){
$('.menu > ul > li:has(ul)').addClass("has-sub");
$('.menu > ul > li > a').each(
function(){
$(this.firstChild).wrap('<span></span>');
});
$('.menu > ul > li > a').click(function(){
var checkElement = $(this).next();
$('.menu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('.menu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-size: 1.05em;
position: relative;
}
.menu {
width: 250px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.menu a {
line-height: 1.3;
}
.menu > ul > li:first-child {
background: #66665e;
background: -moz-linear-gradient(#66665e 0%, #45463d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d));
background: -webkit-linear-gradient(#66665e 0%, #45463d 100%);
background: linear-gradient(#66665e 0%, #45463d 100%);
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.menu > ul > li:first-child > a {
padding: 12px 10px;
background: url(menu_images/pattern.png) top left repeat;
border-top: 1px solid #818176;
text-shadow: 0 -1px 1px #000000;
}
.menu > ul > li:first-child > a > span {
padding: 0;
}
.menu > ul > li:first-child:hover {
background: #379bb9;
background: -moz-linear-gradient(#379bb9 0%, #2C7C94 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #379bb9), color-stop(100%, #2C7C94));
background: -webkit-linear-gradient(#379bb9 0%, #2C7C94 100%);
background: linear-gradient(#379bb9 0%, #2C7C94 100%);
}
.menu > ul > li {
background: #66665e;
background: -moz-linear-gradient(#66665e 0%, #45463d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d));
background: -webkit-linear-gradient(#66665e 0%, #45463d 100%);
background: linear-gradient(#66665e 0%, #45463d 100%);
}
.menu > ul > li:hover {
background: #379bb9;
background: -moz-linear-gradient(#379bb9 0%, #2C7C94 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #379bb9), color-stop(100%, #2C7C94));
background: -webkit-linear-gradient(#379bb9 0%, #2C7C94 100%);
background: linear-gradient(#379bb9 0%, #2C7C94 100%);
}
.menu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #000;
border-top: none;
text-shadow: 0 -1px 1px #000000;
}
.menu > ul > li > a > span {
display: block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.menu > ul > li > a:hover {
text-decoration: none;
}
.menu > ul > li.active {
border-bottom: none;
}
.menu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
.menu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}
.menu ul ul {
display:none;
background: #fff;
/* border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194; */
}
.menu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
.menu ul ul li:last-child {
border-bottom: none;
}
.menu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
.menu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #379bb9;
}
.menu ul ul a:hover {
color: #379bb9;
text-decoration: none !important;
}
.user_menu_link_selected{
}
.admin_menu_link_selected{
}
#submenu_1{
}
#submenu_0 li{
}
#submenu_1 li{
}
#submenu_1 li a{
}
#submenu_1 li:hover a{
}
#submenu_0 li:hover ul li{
}
<div class="menu">
<ul>
<li><a class="user_menu_link_selected" href="?m=dashboard&p=dashboard"><span>Dashboard</span></a></li>
<li class="has-sub"><a class="user_menu_link" href="?m=gamemanager&p=game_monitor"><span>Game Monitor</span></a>
<ul id="submenu_0">
<li><a href="?m=gamemanager&p=game_monitor&home_cfg_id=25">My Game</a>
<ul id="submenu_1">
<li><a title="xxx.xxx.xxx.xxx:xxxxx" class="user_menu_link" href="?m=gamemanager&p=game_monitor&home_id-mod_id-ip-port=4-4-xxx.xxx.xxx.xxx-xxxxx">My Game Server</a></li>
</ul>
</li>
<li><a href="?m=gamemanager&p=game_monitor&home_cfg_id=128">My Game 2</a>
<ul id="submenu_1">
<li><a title="xxx.xxx.xxx.xxx:xxxxx" class="user_menu_link" href="?m=gamemanager&p=game_monitor&home_id-mod_id-ip-port=3-3-xxx.xxx.xxx.xxx-xxxxx">My Game Server 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="user_menu_link" href="?m=TS3Admin"><span>TS3 Admin</span></a></li>
<li><a class="user_menu_link" href="?m=ftp"><span>FTP</span></a></li>
<li class="has-sub"><a href="?m=administration&p=main" class="admin_menu_link" target="_self"><span>Administration</span></a>
<ul>
<li><a class="admin_menu_link" href="?m=addonsmanager&p=addons_manager">Addons Manager</a></li>
<li><a class="admin_menu_link" href="?m=extras">Extras</a></li>
<li><a class="admin_menu_link" href="?m=ftp&p=pure-ftpd_admin">FTP users</a></li>
<li><a class="admin_menu_link" href="?m=user_games">Game Servers</a></li>
<li><a class="admin_menu_link" href="?m=config_games">Game/Mod Config</a></li>
<li><a class="admin_menu_link" href="?m=user_admin&p=show_groups">Groups</a></li>
<li><a class="admin_menu_link" href="?m=modulemanager">Modules</a></li>
<li><a class="admin_menu_link" href="?m=settings">Panel Settings</a></li>
<li><a class="admin_menu_link" href="?m=server">Servers</a></li>
<li><a class="admin_menu_link" href="?m=settings&p=themes">Theme Settings</a></li>
<li><a class="admin_menu_link" href="?m=update">Update Panel</a></li>
<li><a class="admin_menu_link" href="?m=user_admin">Users</a></li>
<li><a class="admin_menu_link" href="?m=litefm&p=litefm_settings">LiteFM Settings</a></li>
<li><a class="admin_menu_link" href="?m=mysql&p=mysql_admin">MySQL Admin</a></li>
<li><a class="admin_menu_link" href="?m=administration&p=watch_logger">Watch Logger</a></li>
</ul>
</li>
<li class="has-sub"><a href="?m=user_admin&p=edit_user&user_id=1" class="user_menu_link" target="_self"><span>admin</span></a>
<ul>
<li><a href="?logout">[Logout]</a></li>
</ul>
</li>
</ul>
</div>