如何使JQuery CSS菜单项可单击

时间:2014-11-23 00:02:54

标签: javascript jquery html css menu

我正在尝试使用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&amp;p=dashboard"><span>Dashboard</span></a></li>
		<li class="has-sub"><a class="user_menu_link" href="?m=gamemanager&amp;p=game_monitor"><span>Game Monitor</span></a>
			<ul id="submenu_0">
				<li><a href="?m=gamemanager&amp;p=game_monitor&amp;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&amp;p=game_monitor&amp;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&amp;p=game_monitor&amp;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&amp;p=game_monitor&amp;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&amp;p=main" class="admin_menu_link" target="_self"><span>Administration</span></a>
			<ul>
				<li><a class="admin_menu_link" href="?m=addonsmanager&amp;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&amp;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&amp;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&amp;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&amp;p=litefm_settings">LiteFM Settings</a></li>
				<li><a class="admin_menu_link" href="?m=mysql&amp;p=mysql_admin">MySQL Admin</a></li>
				<li><a class="admin_menu_link" href="?m=administration&amp;p=watch_logger">Watch Logger</a></li>
			</ul>
		</li>
		<li class="has-sub"><a href="?m=user_admin&amp;p=edit_user&amp;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>

0 个答案:

没有答案