7

div を使用して単純なドロップダウン メニューを作成したいのですが、この問題があります。ボタン div を上に移動すると、かなりうまく表示されますが、マウスがリンク フィールドから出ると (この場合、テキストを表示/非表示)、div が hide になります。非表示領域ボタンを変更するにはどうすればよいですか? 私のファイルでは、ドロップダウン 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 の高さを画像 (80px) よりも小さく (60px) 設定したいかどうかわかりませんか?

ここでjsFiddle

于 2012-10-31T14:57:51.583 に答える