This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp
is the id of the image and nav_menu
is the id of the list, but it's not working.
这是我的jQuery代码,用于在悬停在图像上时显示下拉菜单。 Imgbtn_Dsp是图像的id,nav_menu是列表的id,但它不起作用。
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
3 个解决方案
#1
1
Get rid of div and modify ul
like this if you want to work it properly ;)
如果你想正确地工作,摆脱div并修改这样的ul;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
#2
1
Modify your script like this
像这样修改你的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
你可以在这个jsfiddle中看到鳕鱼的行动。
#3
0
it could be done without jquery. all you have to do is define parent container of image and list set some css.
它可以在没有jquery的情况下完成。你所要做的就是定义图像的父容器,列出一些css。
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
现在定义一些css: -
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
希望你会发现它很有用
#1
1
Get rid of div and modify ul
like this if you want to work it properly ;)
如果你想正确地工作,摆脱div并修改这样的ul;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
#2
1
Modify your script like this
像这样修改你的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
你可以在这个jsfiddle中看到鳕鱼的行动。
#3
0
it could be done without jquery. all you have to do is define parent container of image and list set some css.
它可以在没有jquery的情况下完成。你所要做的就是定义图像的父容器,列出一些css。
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
现在定义一些css: -
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
希望你会发现它很有用