[英]jquery onclick expand div and change text inside span
我的腳本出現問題,我單擊H3,它將展開,並且僅更改跨度中的第一個文本,無論是否單擊第二個H3。 我要收合它之后,它不會變回原始文本。 我應該使用什么? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
您需要為箭頭設置切換功能。 由於無法使用需要使用id的html代碼來完成此操作,因此可以專門針對它們,這是您需要的jquery:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
小提琴演示:
由於您選擇的是#span1,因此每次都只會返回該文檔的第一個實例。 ID必須是唯一的。 嘗試以下方法:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
要向后切換箭頭,請嘗試檢查.pad
元素的可見性:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});
你可以試試這個
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
我做了一個JsFiddle版本供您在這里查看: http : //jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.