Problems with show hide jquery_问答_开发者_运维开发者技术经验分享

I am trying to get show hide to work on multiple objects but I am unable to get it to work. Any help would be nice an much appreciated... I am lost on how to do this. If I only do one show hide it works fine but more than one it does not work properly.

    <!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开发者_Go百科/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>

You are using duplicate IDs for your close anchors. Use the class .close instead and modify your selector to look like:

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

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

...and don't use duplicate IDs, ever ever.

This block:

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

Says that any time ANY anchor is clicked, show the element with the ID of content1. You then define an anchor with an ID of "close", which you define a handler to close the element. This causes a conflict because it is an anchor as well. Since the close element is an anchor with the ID of "close", what do you want it to do? Call show() because it's an anchor or call hide() because it has an ID of "close"?

You need a combination of the other answers plus a bit more, change your markup to use classes instead of duplicate IDs like this:

<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>

And adjust your click handlers to operate on classes and be relative, like this:

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

These click handlers no longer point to an individual ID or class, but rather operate on the classes, relative to the current link. The .click anchor opens the following .content div using .next() and .children(), and the .close link hides the .content div it's in using .closest(), all relative.