我有一个菜单和一个子菜单，但是我无法访问子菜单，但是我想访问子菜单以获取适当的菜单
[英]I have one menu and sub menu's but I am not able to access sub menu but i want to access sub menu for appropriate menu
问题描述
This is my CSS and my sub menu is displaying from left side I want that sub menu should slide up and down 
这是我的CSS，子菜单从左侧显示，我希望该子菜单可以上下滑动
.outer
{
width: 100%;
text-align: center;
background-color: Gray;
padding-top: 20px;
border-radius: 30px;
}
.g_logo
{
width: 20%;
color: White;
float: left;
padding-left: 5%;
font-family:st @Gulim;
padding-bottom: 10px;
}
.g_home
{
width: 15%;
color: Black;
float: left;
padding-left: 1%;
font-family:@Gulim;
}
.g_services
{
width: 15%;
color: Black;
float: left;
padding-left: 1%;
font-family: @Gulim;
}
.g_achvmnt
{
width: 14%;
color: Black;
float: left;
padding-left: 1%;
font-family: @Gulim;
}
.g_cnct
{
width: 15%;
color: Black;
float: left;
padding-left: 1%;
font-family: @Gulim;
}
.clear
{
clear: both;
}
.g_home_items
{
margin-left: 28%;
background-color: Purple;
float: left;
width: 15%;
}
.g_services_items
{
margin-left: 42%;
background-color: silver;
float: left;
width: 15%;
border-radius:5px;
}
.g_achvmnt_items
{
margin-left: 57%;
background-color: Purple;
float: left;
width: 15%;
}
.g_cnct_items
{
margin-left: 72%;
background-color: AppWorkspace;
float: left;
width: 15%;
}
This my Jquery 这是我的Jquery
I am not able to retrieve my sub menu please help me to get access my sub menu when I am mouse hover my menu. 我无法检索子菜单，当我将鼠标悬停在菜单上时，请帮助我访问子菜单。 sub menu appears but I cannot access that sub menu 子菜单出现，但我无法访问该子菜单
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$(".g_services_items").hide();
$(".g_services").hover(function () {
$(".g_services_items").toggle("slow");
});
});
</script>
**HTML FILE this is my HTML coed plzzz help me for this**
<body>
<form id="form1" runat="server">
<div class="outer">
<div class="g_logo">
LOGO
</div>
<div class="g_home">
HOME
</div>
<div class="g_services">
SERVICES
</div>
<div class="g_achvmnt">
ACHIEVMENTS
</div>
<div class="g_cnct">
CONTACT US
</div>
<div class="clear">
</div>
</div>
<div class="g_services_items">
<li class="mega first haschild">
<ul class="megamenu level1">
<li class="mega first"><span class="menu-title">T-shirts</span></li>
<li class="mega"><span class="menu-title">Sport shoes</span></li>
</ul>
</li>
</div>
</form>
</body>
2 个解决方案
解决方案1
0 已采纳 2014-03-16 09:04:10
you didnt post your css so i dont know where and how your submenu appears, but this issue is quite common. 您没有发布CSS，所以我不知道子菜单的位置和显示方式，但是这个问题很常见。
you hover mouse over 'services' and sub menu appears, but it disappears when you try to click anything on the submenu. 您将鼠标悬停在“服务”上，就会出现子菜单，但是当您尝试单击子菜单上的任何内容时，它会消失。
basically you could make your submenu stay by doing the following: 基本上，您可以通过执行以下操作使子菜单停留：
$(document).ready(function () {
$(".g_services_items").hide();
$(".g_services, .g_services_items").on("mouseover",function () {
$(".g_services_items").stop().show("slow");
});
$(".g_services, .g_services_items").on("mouseleave",function () {
$(".g_services_items").stop().hide("slow");
});
});
you can check how it works Here 您可以在这里查看其工作原理
explanation: 说明：
- you dont toggle the sub menu, you show() and hide() it. 您不切换子菜单，而是对其进行show（）和hide（）。
- you show the menu when mouse hovers over the 'services' or over the submenu, 当鼠标悬停在“服务”或子菜单上时，会显示菜单
- you hide the sub menu when mouse is not over neither 'services' or the submenu. 当鼠标不在“服务”或子菜单上时，可以隐藏子菜单。
- the .stop() function here meant to avoid misbehavior, because the show() and hide() animations have to complete before the other one starts, so you have to stop them in the middle on ever action. 这里的.stop（）函数旨在避免出现异常行为，因为show（）和hide（）动画必须在另一动画开始之前完成，因此您必须在每次操作时将它们停在中间。
EDIT: 编辑：
your menu appears from the left because you have set 您的菜单从左侧出现，因为您已设置
.g_services_items
{
margin-left: 42%;
float: left;
}
remove those two properties and set the submenu left: to the left: of the 'services' using jQuery: 删除这两个属性，并使用jQuery将“服务”的子菜单设置为左：左：
解决方案2
0 2014-03-16 09:08:12
This is what u can try with hide and show , mouse over and leave 这是您可以尝试隐藏和显示，将鼠标悬停并离开的方法
$(".g_services_items").hide();
$(".g_services").hover(function (e) {
$(".g_services_items").show("slow");
})
$(".g_services_items").hover(function () {
$(this).show("slow");
}).mouseleave(function(){
$(this).hide();
})
});
here is the live : LIVE EXAMPLE 这是现场直播： 现场直播示例
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.