Question

我正在使用一些Javascript来制作“Read More”和“Read Less”按钮来展开和折叠文本。我的功能几乎完全像我希望的那样，但我无法弄清楚最终的语法。

我的进度标记在这里：

https://jsfiddle.net/bmorrical/j17zfy7e/

有人能指出我正确的方向：

点击后删除“阅读更多”
点击“阅读更少”时显示“阅读更多”

我只是想点击“阅读更多”，谢谢。

JS

function show() {
   document.getElementById('scritta').className='visiblediv'; 
}
function hide() {
   document.getElementById('scritta').className='hiddendiv'; 
}

var p1 = document.getElementById("p1");
p1.onclick = show;
var p2 = document.getElementById("p2");
p2.onclick = hide;

CSS

.visiblediv {
    display: block;
}

.hiddendiv {
    display: none;
}

HTML

<p>This is sample text to represent a paragraph.</p>
<button id="p1">Read More</button>
<div id="scritta" class="hiddendiv">This is more sample text to represent additional text after the button has expanded the text.<button id="p2">Read Less</button></div>

Answer 1

您可以将相同的hiddendiv和visiblediv类应用于按钮ID：

JS Fiddle

function show() {
    document.getElementById('scritta').className = 'visiblediv';
    document.getElementById('p1').className = 'hiddendiv';
}

function hide() {
    document.getElementById('scritta').className = 'hiddendiv';
    document.getElementById('p1').className = 'visiblediv';
}

Answer 2

如果您使用的是jquery，则可以使用toggle()和hide()

执行某些操作

$('#p2').hide();

$('#p1').click(function(){
    $('#p1').toggle();
    $('#p2').toggle();
});

$('#p2').click(function(){
    $('#p1').toggle();
    $('#p2').toggle();
});

小提琴：https://jsfiddle.net/j17zfy7e/6/

Answer 3

那样的东西？

$('#p1').on('click', function(){
    $(this).css('visibility', 'none');
    $('#p2').css('visibility', 'visible');
});

$('#p2').on('click', function(){
    $(this).css('visibility', 'none');
    $('#p1').css('visibility', 'visible');
});

只需添加可见性：隐藏到css中的＃p2或使用类

$('#p1').on('click', function(){
        $(this).addClass('hidden');
        $('#p2').addClass('visible');
    });

等

Answer 4

当你打电话给你的节目，隐藏功能时，你可以像这样应用p1你的隐藏/可见类。

function show() {
   document.getElementById('scritta').className='visiblediv'; 
   document.getElementById('p1').className='hiddendiv'; 
}

function hide() {
   document.getElementById('scritta').className='hiddendiv'; 
   document.getElementById('p1').className='visiblediv'; 
}

var p1 = document.getElementById("p1");
p1.onclick = show;
var p2 = document.getElementById("p2");
p2.onclick = hide;

A working fiddle

显示/隐藏Div - 并在单击时隐藏“Read More”按钮

4 个答案: