Question

我的脚本出现了问题，我单击它会扩展它，只会更改第一个文本，无论是否点击第二个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

您需要为箭头设置切换功能。由于这不能用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('&#8744;');
        } else {
            $(this).find('.span1').attr('id', 'yes').html('&#8743;');
        }
    });
});

小提琴演示：

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('&#8744;');
        } else {
            $arrow.html('&#8743;');
        }
        $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') ? '&#8743;' : '&#8744;';
            $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>

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

4 个答案: