我需要做的是在点击.info时切换.information,同时隐藏所有其他.information div。我现在可以这样做我的问题是当我点击关闭一个打开的.information div它不会关闭。如何修改以下代码来执行此操作?我有一个toggle()所以认为它会工作?抓住jQuery !!
<ol id="resonsToCome">
<li>
<p>A packed and extensive activites programe</p>
<div class="info">
<img src="images/icons/information.png" width="24" height="24" />
</div>
<div class="information">
<p>The 40+ activities range from 1 to 2 hours. As everything is on site there is no time wasted travelling which ensures up to 5/6 activities per day.</p>
</div>
</li>
<li>
<p>Instructors stay with their group throughout your stay</p>
<div class="info">
<img src="images/icons/information.png" width="24" height="24" />
</div>
<div class="information">
<p>Building a trust and friendship with our customers makes your stay memorable in so many ways.</p>
</div>
</li>
<li>
<p>Friendly and experienced instructors</p>
<div class="info">
<img src="images/icons/information.png" width="24" height="24" />
</div>
<div class="information">
<p>Our instructors take part in a rigorous selection and continuous training programme.</p>
</div>
</li>
<li>
<p>A great environment and perfect location!</p>
<div class="info">
<img src="images/icons/information.png" width="24" height="24" />
</div>
<div class="information">
<p>25 acres of beautiful Somerset fields, woodlands and river only 2 hours from London and 1 hour south of Bristol and Bath.</p>
</div>
</li>
</ol>
和jQuery
$('div.info').on('click', function() {
$('.information').hide();
$(this).closest('ol#resonsToCome li').find('.information').toggle();
});
答案 0 :(得分:1)
由于您隐藏了所有内容,切换器将重新显示您要隐藏的项目。试试这个
$(document).ready(function(){
$('div.info').on('click', function() {
var closestIsVisible = $(this).closest('ol#resonsToCome li').find('.information').is(":visible");
$('.information').hide();
if(!closestIsVisible)
{
$(this).closest('ol#resonsToCome li').find('.information').toggle();
}
});
});
答案 1 :(得分:0)
请尝试以下代码:
$("div.info").on("click", function() {
var el = $(this).siblings(".information");
$("#resonsToCome .information").not(el.show()).hide();
});
答案 2 :(得分:0)
见:
$('div.info').click(function(e) {
$(this).parent().find('.information').toggle();
});
这会奏效。在这里工作小提琴 - http://jsfiddle.net/RCefe/1/
单击1,2,3,4,因为它们是div中带有“info”类的文本,因为图像不可见。希望这会有所帮助。