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

Question

我的脚本有问题，我单击 H3，无论我是否单击第二个 H3，它都会展开并且只更改 span 中的第一个文本。我想折叠它后，它不会变回原始文本。我应该用什么？质量

   <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>

Answer 1

您需要为箭头设置切换功能。因为这不能用你需要使用 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('∧');
        }
    });
});

fiddle 演示:

http://jsfiddle.net/Hive7/5xueU/2/