0

「トグル1」にカーソルを合わせると「1」を表示し、「トグル1」をクリックすると「2」を表示したい。また、「トグル2」でホバーすると「3」、クリックすると「4」と表示されるルールを作成したいと思います。「ホバー（トグル1）」の終了divを「フロント（2）」の後ろに配置して、2をクリックしてトグルできるようにしました。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="hover">Toggle 1
<div class="front" style="display:none">2</div></div>
<div class="back" style="display:none">1</div>

<div class="hover">Toggle 2
<div class="front" style="display:none">4</div></div>
<div class="back" style="display:none">3</div>

<script>

$("div.hover").click(function () {
$("div.front").toggle( );
});

$("div.hover").hover(
function() { $(this).children("div.back").show(); },
function() { $(this).children("div.back").hide(); }
});
</script>

</body>
</html>
4

2 に答える 2

4

あなたのクロージングdivは間違った場所にあり、それは私が思うにそれを台無しにしています。

<div class="hover">Toggle 1
  <div class="front" style="display:none">2</div>
  <div class="back" style="display:none">1</div>
</div>

<div class="hover">Toggle 2
  <div class="front" style="display:none">4</div>
  <div class="back" style="display:none">3</div>
</div>

それを試してみてください。

于 2012-04-12T20:41:12.550 に答える
0

あなたのコードは意味がありません。

$("div.hover").hover(
function() { $(this).children("div.back").show(); },
function() { $(this).children("div.back").hide(); }
});

何をしようとしていますか？非表示と表示を同時に行いますか？

グレッグB.は正しいですが、問題は解決しません。

このコードを試してください：

     <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="hover">Toggle 1
<div class="front" style="display:none">2</div>
<div class="back" style="display:none">1</div>
</div>
<div class="hover">Toggle 2
<div class="front" style="display:none">4</div>
<div class="back" style="display:none">3</div>
</div>
<script>


hoverdiv = $("div.hover")

hoverdiv.on("hover", function() {
    $(this).children(".front").show()
});
hoverdiv.on("mouseleave", function() {
    $(this).children(".front").hide()
})
hoverdiv.on("click", function() {
    $(this).children(".back").toggle()
})
</script>

</body>
</html>
于 2012-04-12T20:54:18.777 に答える