[英]show/hide div by clicking image
我希望能够单击图像以显示/隐藏div(带有文本)。 我已经为一张图片工作了,但是我有多张图片需要切换文本。
javascript代码
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$("slidingDiv").slideToggle();
});
});
HTML:
<a href="#" class="show_hide"><img src="image.jpg"></a>
<div class="slidingDiv">
<h2>Title</h2>
<p>text</p>
</div>
因此,此方法有效,但仅适用于一个图像+格。 我想要第二个图像和div,但是使用相同的slidingDiv
类,然后单击第二个图像以切换第二个div显然会切换两个div。
那么,如何在单击两个图像之一时如何获得两个图像来切换它们自己的div,而不是同时切换两个div?
更改:
$("slidingDiv").slideToggle();
至
$(this).next(".slidingDiv").slideToggle();
如您所注意到的, $(".slidingDiv")
选择带有slideDiv类的所有元素。 要选择相对于您单击的元素的slideDiv类,请使用this
来引用要单击的元素,然后使用.next(".slidingDiv")
选择下一个元素,只要它具有class slideDiv。
您忘记添加"."
在$("slidingDiv").slideToggle();
你也可以用这个
$(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { //$(".slidingDiv").slideToggle(); var isvisible = $(this).next('.slidingDiv').is(':visible'); if ( isvisible ) { $(this).next('.slidingDiv').hide(); } else{ $(this).next('.slidingDiv').show(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#" class="show_hide"><img src="image.jpg" alt="img"/></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div>
尝试这个:
$('.show_hide').click(function(e) {
$(e.target).parent().next('.slidingDiv').slideToggle();
});
e.target
将为您提供click event
的源DOM元素。
将两者包装在同一个div中,然后执行以下步骤:
$(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { $(this).parent().find(".slidingDiv").slideToggle(); }); });
.fleft{ float: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.