Javascript jquery onclick展开div并更改span内的文本

我的脚本有一个问题，我点击H3，它将展开，并且只会更改span中的第一个文本，无论我点击第二个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('&#8743;')
      });
    });
    </script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

jQuery（文档）.ready（函数（）{
jQuery（“.pad”）.hide（）；
//使用类msg_body切换组件网
jQuery（“.heading”）。单击（函数（）
{
jQuery（this.next（“.pad”）.slideToggle（500）；
jQuery（'#span1）.html（'∧；'））
});
});
正文1和8744；
内容
文本2和8744；
内容

既然您选择了#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('&#8743;')
  });
});
</script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

---

您需要为箭头设置切换功能。由于html代码无法实现这一点，因此您需要使用ID，以便能够专门针对它们。以下是您需要的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('∧');
        }
    });
});

小提琴演示：

你可以试试这个

$(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)
        });
    });
});

---

我在这里为您提供了一个JSFIDLE版本：

HTML

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

text1
∨
∧
内容
文本1
∨
∧
内容

您在

jQuery（'#span1）.html（'∧；'）中有一个输入错误（缺少关闭
”
）

您在

jQuery（'span）

中忘记了关闭

”

您有输入错误和重复的ID。然后删除重复的ID:）好的，我已将span更改为类，但名称相同。那么，现在我如何在单击折叠后重置为默认文本？@TJ:你说：“ID必须是唯一的”，但你的代码没有显示这一点！！

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();       
        }
    });
});

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>