我想用 div 创建一个简单的下拉菜单，但我遇到了这个问题: 当我的按钮 div 显示得很好但是当鼠标从我的链接字段中出来时(在这种情况下显示/隐藏文本)我的 div 去隐藏。我怎样才能更改我的隐藏区域按钮？ 因为在我的文件中我无法选择下拉 div 中的链接。
HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Sliding Div</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropdown/drop.js" type="text/javascript"></script>
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/>
</head>
<body>
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</body>
</html>
CSS 代码:
.show_hide {
display:none;
}
JavaScript 代码:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseover(function(){
$(".slidingDiv").slideToggle();
});
$('.show_hide').mouseout(function(){
$(".slidingDiv").slideToggle();
});
});
最佳答案
您需要将链接和div 包装到同一个容器中，然后在那里绑定(bind)事件。
<div class="wrapper">
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</div>
然后，将事件绑定(bind)到“包装器”类，而不是将事件绑定(bind)到 show_hide。
关于javascript - 使用 mouseover 和 mouseout 显示、隐藏 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13160484/