新來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，請指教？

回答

相關問題