jquery - 显示隐藏jquery的问题

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

最佳答案

您的紧密 anchor 使用了重复的 ID。使用类 .close 代替,并将选择器修改为如下所示:

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

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

...并且永远不要使用重复的 ID。

关于jquery - 显示隐藏jquery的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2752140/

相关文章:

javascript - 如何将变量设置为 AJAX 响应数据?

javascript - 如何捕获 DOM 元素的创建并使用 jQuery 操作它们

javascript - 按元素名称中的索引选择元素

jquery - BBC 网站上的拖放部分是如何完成的?

javascript - 在页面加载后加载 respond.js

javascript - 从菜单中选择打印后的 Google Chrome 打印事件捕获

javascript - 使用 jquery 编辑文本

javascript - 如何用jQuery获取url的最后两个字符?

jQuery 上一个下一个元素

javascript - Bootstrap typeahead 不适用于从 php 页面检索的动态数组