顯示隱藏jquery的問題

我想讓顯示隱藏在多個對象上工作，但我無法讓它工作。任何幫助將是非常好的讚賞......我迷失在如何做到這一點。如果我只做一次show hide，它可以正常工作，但不止一次它不能正常工作。顯示隱藏jquery的問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Show Hide Sample</title> 
<script src="js/jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#content1').hide(); 
    $('a').click(function(){ 
$('#content1').show('slow'); 

}); 

$('a#close').click(function(){ 
     $('#content1').hide('slow'); 
}) 

}); 
</script> 

    <style> 
body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF} 
#content1{ 
border:1px solid #DDDDDD; 
padding:10px; 
margin-top:5px; 
width:300px; 
} 
</style> 

</head> 

<body> 

<a href="#" id="click">Test 1</a> 
<div class="box"> 
<div id="content1"> 
<h1 align="center">Hide 1</h1> 

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 




<p><a href="#" id="close">Close</a></p> 
</div> 
</div> 


<a href="#" id="click">Test 2</a> 
<div class="box"> 
<div id="content1"> 
<h1 align="center">Hide 2</h1> 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 

<p><a href="#" id="close">Close</a></p> 
</div> 
</div> 


</body> 
</html>

來源

2010-05-02 Michael

您正在爲您的關閉錨使用重複的ID。使用類.close，而不是和修改您的選擇看起來像：

$('a.close').click(function(){ 
    $('#content1').hide('slow'); 
}); 

<a href="#" class="close">Close</a>

...不要使用重複的ID，永遠永遠。

來源

2010-05-02 01:24:34 karim79

我想我明白了...... – Michael 2010-05-02 01:29:14

此塊：

$('a').click(function(){ 
    $('#content1').show('slow'); 
});

說被點擊ANY錨的任何時間，示出了具有內容1的ID的元素。然後，您定義一個ID爲「close」的錨點，您可以定義一個處理程序來關閉該元素。這會導致衝突，因爲它也是一個錨點。由於close元素是ID爲「close」的錨點，因此您希望它做什麼？調用show（），因爲它是一個錨或調用hide（），因爲它的ID爲「close」？

來源

2010-05-02 01:27:26 BradBrening

感謝您的解釋......我誠實地說，沒有想到這一點。 – Michael 2010-05-02 01:30:08

你需要其他的答案的組合再加上多一點，更改您的標記使用類，而不是重複的ID是這樣的：

<a href="#" class="click">Test 2</a> 
<div class="box"> 
<div class="content"> 
<h1 align="center">Hide 1</h1> 

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> 

<p><a href="#" class="close">Close</a></p> 
</div> 
</div>

，並調整自己的點擊處理程序類上工作，而且還要相對，像這樣：

$('a.click').click(function(){ 
    $(this).next('.box').children('.content').show('slow'); 
}); 
$('a.close').click(function(){ 
    $(this).closest('.content').hide('slow'); 
});

這些點擊處理程序不再指向一個單獨的ID或類，但上了班，相對於當前的鏈接而進行操作。 .click錨點使用.next()和.children()以及.close鏈接隱藏了.content div，它使用.closest()（所有相對）隱藏了以下.content div。

來源

2010-05-02 01:31:45

顯示隱藏jquery的問題

回答

相關問題