[英]Changing span text to hide/show on jQuery toggle()
strong textI'm trying to Hide/Show a div by clicking on Span element. 我试图通过单击Span元素来隐藏/显示div。 I'm trying to change the text inside the span to toggle between hide(when element is showing) and show(when element is hidden).
我正在尝试更改跨度内的文本以在hide(元素显示时)和show(元素隐藏时)之间切换。 i belie I got on a good start but I'm now stuck in getting the jQuery script to work.
我相信我有一个良好的开端,但是现在我陷入了使jQuery脚本正常工作的困境。 Any help would be appreciated.
任何帮助,将不胜感激。
Here is my jsFiddle : http://jsfiddle.net/3AnPX/ 这是我的jsFiddle : http : //jsfiddle.net/3AnPX/
HTML 的HTML
<span class="help_target">Open</span>
<div class="help_content">Content 1</div>
<span class="help_target">Open</span>
<div class="help_content">Content 2</div>
<span class="help_target">Open</span>
<div class="help_content">Content 3</div>
<span class="help_target">Open</span>
<div class="help_content">Content 4</div>
jQuery jQuery的
$(".help_content").hide();
$(".help_target").click(function () {
$(this).next('.help_content').toggle();
$(this).toggle(function () {
$(this).text('Open');
}, function() {
$(this).text('Close');
});
});
Update: 更新:
Trying to implement this on my actual website, but it's not working: http://jsfiddle.net/PzkxA/ 尝试在我的实际网站上实施此操作,但无法正常工作: http : //jsfiddle.net/PzkxA/
You can check the visibility of toggled element to change the text: 您可以检查切换元素的可见性以更改文本:
if(!$(this).next('.help_content').is(":visible") )
$(this).text('Open');
else
$(this).text('Close');
Update: 更新:
$("span.hideshow").click(function () {
$(this).closest('.profilestats-courseblock').find('.profilestats-course-badges').toggle();
$(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
});
Bit late but another way here :)
demo http://jsfiddle.net/q76dk/ 有点晚了,但这里有另一种方式
:)
演示 http://jsfiddle.net/q76dk/
So probably all you want is to cahgne the text nsince the .help_content
is outside span
因此,您可能想要的只是文字,因为
.help_content
不在span
Hope this fits your needs. 希望这符合您的需求。
:)
code 码
$(".help_content").hide();
$(".help_target").click(function () {
$(this).next('.help_content').toggle();
$(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.