Question

我很难在点击时显示/隐藏div。基本上你点击鲜花（div，我要切换的那个），然后淡出或隐藏（这是好的）然后消失（这是不好的）。我需要能够点击花朵并让它们淡出然后能够点击（在相同的“花朵”div上）并让它们淡入或显示（如灯光开关）。< / p>

这是我正在使用的JavaScript代码：

$('.show_hide').click(function() {
$("#treeFlowers").fadeToggle()
return false;
});;
});

这是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>App 1-1</title>
<link rel="stylesheet" type="text/css" href="css/master.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/master.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="mainWrapper">
<div id="treeFlowers">
<a href="#" class="show_hide"><img src="images/app1-1/treeFlowers.png" alt="tree Flowers"/></a>
</div>
<div id="treeApp">
<img src="images/app1-1/tree.png" alt="light tree"/>
</div>
<div id="textApp">
<img src="images/app1-1/text1.png" alt="text"/>
</div>  
<div id="flowers">
<img src="images/app1-1/flowers.png" alt="flowers" />
</div>
</div>
</body>

Answer 1

fadeToggle()是fadeIn()和fadeOut()的别名，在不透明度降低后设置display:none;并且display:block;在不透明度恢复之前设置<div class="flower"> <img src="my_flower.jpg" /> </div> 。你想要做的是包装你的图像并在包装器上设置click事件。例如：

$('.flower').click(function(){
    $(this).children('img').fadeToggle();
});

JQuery的：

{{1}}

Answer 2

你试过吗

<script>
$('.show_hide').click(function(){
    $("#treeFlowers").toggle();
});
</script>

放在文档末尾，就在</body>标记之前？

此外，show_hide类的元素不应嵌套在具有treeFlowers id的div中。

Answer 3

你应该将花朵div嵌套在另一个容器div中，这个div将被点击，我们称之为花容器，然后按如下方式切换它：

$(function(){
  $('#flowers-container').toggle(
    function(e){ $('#threeFlowers').hide(); },
    function(e){ $('#threeFlowers').show(); });
});

jquery的新手，试图显示/隐藏div onclick，请指教？

3 个答案: