[英]How to change content of a div which toggles another div?
My HTML is like this: 我的HTML是这样的:
<div>
<div class="action">Show details</div>
<div>Some hidden details</div>
</div>
My current JS is this: 我当前的JS是这样的:
$(".action").click(function(e) {
e.preventDefault();
$(this).next("div").slideToggle('slow');
});
How can I also change the content of the action
div to "Hide details" / "Show details" on each toggle? 如何在每次切换时将
action
div的内容更改为“隐藏详细信息” /“显示详细信息”?
So it's clear to users that clicking on the link again will close the div. 因此,对于用户来说很清楚,再次单击该链接将关闭div。
In your div click handler: 在您的div点击处理程序中:
var next = $(this).next('div');
$(this).html(next.is(':visible') ? 'Hide Details' : 'Show Details');
$(".action").click(function(e) {
e.preventDefault();
var $container = $(this).next("div");
var title = $container.is(':visible') ? "Show details" : "Hide details" ;
$container.slideToggle('slow');
$(this).text(title);
});
Code: http://jsfiddle.net/45Vz9/1/ 代码: http : //jsfiddle.net/45Vz9/1/
<div>
<div class="action">Show details</div>
<div class="toggleDiv">Some hidden details</div>
</div>
in Jquery 在jQuery中
$(".action").click(function () {
//e.preventDefault(); //what is it doing here
$(".toggleDiv").toggle("slow");
});
Here is another solution: 这是另一种解决方案:
$(".action").click(function(e) {
e.preventDefault();
var nextDiv= $(this).next("div");
var title = nextDiv.is(':visible') ? "Hide" : "Show" ;
$(this).html(title);
$(nextDiv).slideToggle('slow');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.