[英]Click function that opens and closes
I am trying to code something like this one on http://teamgeek.co.za/#who 我正在尝试在http://teamgeek.co.za/#who上编写类似这样的代码
I already had the code on the gif and div that will show the description on the bottom of each picture selected. 我已经在gif和div上使用了代码,这些代码将在所选每张图片的底部显示说明。 The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself. 问题是,如果我单击第二行,则第一行中打开的描述不会自动关闭。
Here is my script that I used. 这是我使用的脚本。
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
<script>
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
This is the full code that I used, and I am using the javascript above to get the functions: 这是我使用的完整代码,我正在使用上面的javascript获取功能:
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages">
<div id="1" class="mydivhide">
<h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
</div>
<div id="2" class="mydivhide">
<h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
</div>
<div id="3" class="mydivhide">
<h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
</div>
<div id="4" class="mydivhide">
<h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items2">
<div class="item">
<a id="5" class="work page-scroll">
<img class="media" src="img/tryimages/rd.png"/>
<div class="content">
<img class="media" src="img/tryimages/rd.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="6" class="work page-scroll">
<img class="media" src="img/tryimages/soc.png"/>
<div class="content">
<img class="media" src="img/tryimages/soc.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="7" class="work page-scroll">
<img class="media" src="img/tryimages/anj.png"/>
<div class="content">
<img class="media" src="img/tryimages/anj.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="8" class="work page-scroll">
<img class="media" src="img/tryimages/ian.png"/>
<div class="content">
<img class="media" src="img/tryimages/ian.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages2">
<div id="5" class="mydivhide">
<h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
</div>
<div id="6" class="mydivhide">
<h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
</div>
<div id="7" class="mydivhide">
<h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
</div>
<div id="8" class="mydivhide">
<h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
</div>
</div>
</div>
</section>
Below code optimization of toggle for your issue 下面针对您的问题切换代码的优化
you have set class as .row-data for each row and the and write below script.. 您已将每行的类设置为.row-data,并在下面编写脚本。
<script>
$(".row-data a").click(function() {
$(".row-data").hide("slow");
$(this).parent().show("slow");
});
</script>
Note: remove your Script... 注意:删除脚本...
If you want to go with this code you should maybe use this: 如果要使用此代码,则应使用以下代码:
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
</script>
I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-) However, this isn't a good way to solve your issue. 我不确定我是否正确理解了该代码段,因为我不了解您的其余代码:-)但是,这不是解决您的问题的好方法。 As in the comments already mentioned, it's a lot better to handle it with classes. 就像已经提到的注释一样,最好使用类来处理它。 Here is a jsfiddle which can easily solve your problem: JSFiddle 这是一个可以轻松解决您的问题的jsfiddle : JSFiddle
However you might only change the effect, but this is a minor thing. 但是,您可能只更改了效果,但这是次要的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.