显示隐藏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的问题

回答

相关问题