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

我很难在点击时显示/隐藏div。基本上，你点击花朵（div，我想要切换），然后淡出或隐藏（这很好），然后消失（这不好）。我需要能够点击花朵并让它们淡出，然后点击（在相同的“花朵”div），让它们退色或显示（如灯光开关）。新来jquery，试图显示/隐藏div onclick，请指教？

下面是我使用的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>

来源

2011-08-29 jsavage980

所以，你希望你的DIV淡出，但仍然填满它在不透明时所做的空间，然后在点击时切换此行为？ – Bojangles

但是如果花朵淡出/隐藏，您将无法看到它们，您想在哪里再次点击来切换它们。 – tkt986

是的，我想要div淡出，但正如tsegay指出，一旦div淡出/隐藏我将无法切换淡入/显示，因为该div将被隐藏。任何建议，以什么最好的方式来处理？多谢你们 – jsavage980

你应该巢内的另一个div容器，这将是被点击了一个花格，让我们把它叫做花容器，然后做一个切换就可以了，如下所示：

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

来源

2011-08-29 01:10:46

fadeToggle()是fadeIn()和一个别名，其不透明度放倒后置display:none;和display:block;，在不透明度恢复之前。你想要做的是包装你的图像，并在包装上设置点击事件。例如：

<div class="flower"> 
    <img src="my_flower.jpg" /> 
</div>

JQuery的：

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

来源

2011-08-29 01:09:36 AlienWebguy

你试过

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

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

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

来源

2011-08-29 01:10:15 giga

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

回答

相关问题