7

我想用 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();
});

});
4

2 回答 2

5

您需要将链接和 div 包装到同一个容器中，然后在那里绑定事件。

<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>

然后，而不是将事件委托给 show_hide，将其绑定到类“包装器”。

于 2012-10-31T14:44:56.373 回答
2

除了@roacher 的回答，您还需要通过设置宽度将包装器 div 紧紧地裁剪到图像上。

您还可以将mouseover/mouseout配对替换为悬停

最后，我不确定您是否要将滑动 div 的高度（60 像素）设置为小于图像（80 像素）？

jsFiddle在这里

于 2012-10-31T14:57:51.583 回答