jQuery onclick展开div并更改跨度内的文本

Question

我的脚本出现问题，我单击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('&#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('∧');
        }
    });
});

小提琴演示：

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

Answer 2

由于您选择的是＃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>

要向后切换箭头，请尝试检查.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);
    });
});

Answer 3

你可以试试这个

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

Answer 4

我做了一个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;">&#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>