在javaScript html中显示更少或显示更多[重复]

Question

我有这样的代码。我想显示 maxlength 100 但是当我单击按钮时我想查看所有文本。当我再次单击按钮时，我想显示长度将再次变为 100。 我没有这样做。你能帮助我吗 ？ 对不起我的英语

function MyButton () {
                    var x = document.getElementById("p1").maxLength = 300;
                    document.querySelector('.p1').innerText = x;
                    $("#More").css("display", "none")
                }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="p1" >
    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined 
    </span>
 

    <button onclick="MyButton()" id="More">..Show More</button>

Answer 1

您可以做一个这样的小技巧，在页面加载时将全文内容分配给数据集属性，但在页面上显示简短版本。 单击按钮时，将短文本内容分配给另一个数据集属性并显示全文。然后，当再次单击该按钮时，此过程会重复以隐藏全文。

document.querySelectorAll('button.More').forEach(bttn=>{
  bttn.dataset.state=0;
  bttn.addEventListener('click',function(e){
    let span=this.previousElementSibling;
        span.dataset.tmp=span.textContent;
        span.textContent=span.dataset.content;
        span.dataset.content=span.dataset.tmp;

        this.innerHTML=this.dataset.state==1 ? 'Show More...' : 'Show Less...';
        this.dataset.state=1-this.dataset.state;
  })
});

document.querySelectorAll('span.p1').forEach(span=>{
  span.dataset.content=span.textContent;
  span.textContent=span.textContent.substr(0,100) + '...';
})

.p1{margin:1rem;display:block;}

<span class="p1" >
  Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv   Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined 
</span>
<button class="More">..Show More</button>


<span class="p1" >
  I hate yogurt. It's just stuff with bits in. You hit me with a cricket bat. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? I'm the Doctor, I'm worse than everyone's aunt. *catches himself* And that is not how I'm introducing myself.

  All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant.
</span>
<button class="More">..Show More</button>

<span class="p1" >
  Saving the world with meals on wheels. Saving the world with meals on wheels. It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.

  You hit me with a cricket bat. You've swallowed a planet! You know how I sometimes have really brilliant ideas? Heh-haa! Super squeaky bum time! Aw, you're all Mr. Grumpy Face today.
</span>
<button class="More">..Show More</button>

<span class="p1" >
  Aw, you're all Mr. Grumpy Face today. I am the last of my species, and I know how that weighs on the heart so don't lie to me! All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?

  You hit me with a cricket bat. No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. Stop talking, brain thinking. Hush. I am the last of my species, and I know how that weighs on the heart so don't lie to me!
</span>
<button class="More">..Show More</button>