Question

我想要切换一些HTML文字，以便更改为＆＃34;打开＆＃34;或＆＃34;关闭＆＃34;取决于它的状态（这个文本在H2标题中的SPAN中），但是我很难尝试让它工作并找到正确的位置。我的JS切换工作正常，但如何让jquery更改HTML文本？

这是JS（这里没有切换文本，因为无法使其工作）：

$(document).ready(function(){       

    $(".open").click(function(){

    $(this).toggleClass('active').siblings('h2').removeClass('active');

    if(false == $(this).next().is(':visible')) {
        $('.panel').slideUp(300);
    }

    $(this).next().slideToggle(300);

    });
});

这是HTML：

<div class="accordion">
    <h2 class="open">test <span>Open</span></h2>
    <div class="panel">
        <h3>title</h3>
        <p>lorem ipsum sit dolor</p>
    </div>

    <h2 class="open">test 2 <span>Open</span></h2>
    <div class="panel">
        <h3>title</h3>
        <p>lorem ipsum sit dolor</p>
    <div>
</div>

我搜索了论坛，发现了一些用于切换文本的JS：

Toggle Text with jQuery

但似乎无法让它在核心工作，任何帮助都会非常感激，因为我是jquery的新手，只是一个css / html开发人员。

Answer 1

$(document).ready(function(){
  $(".accordion h2").on('click',function(){
    var $this = $(this);
    if( $this.hasClass('open') ){ //On click check if h2 has class 'open'
      $this.next('.panel').slideUp(300); //if yes close or slideUp
      $this.find('span').html('Close'); //Change span to 'Close'
    } else {
      $this.next('.panel').slideDown(300); //if no open or slideDown
      $this.find('span').html('Open'); //Change span to 'Open'
    }
    $this.toggleClass('open'); //Toggle class
  });
});

希望得到这个帮助。

通过显示/隐藏内容来实现文本切换，无法确定放置位置

1 个答案: