Question

我的html页面内容低于

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

详细信息内容最初已折叠。当用户单击“阅读更多”按钮时，我需要显示详细信息内容。我可以做到这一点。我将为按钮的onclick事件定义详细信息div标签和javascript的id。使用id i将更改div样式显示。

但我有多个基于后端数据的部分列表。所以我的页面会像下面那样呈现

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div style="display:none">
        Details 2
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div style="display:none">
        Details 3
    </div>
    <button>Read More</button>
</div>

现在，当单击“阅读更多”按钮时，如何实现展开和折叠功能。

Answer 1

使用普通的javascript和一些类的战略性添加，你可以做到这一点，这将使每个按钮成为一个切换，甚至根据切换状态更改它的文本。然后，一个javascript将用于此结构的所有重复实例，并且代码将独立于摘要，详细信息和按钮的确切HTML布局（只要它们保留相同的类并且位于相同的容器div中。

HTML：

<div>
    <div>
        Summary 1
    </div>
    <div class="details" style="display:none">
        Details 1
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div class="details" style="display:none">
        Details 2
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div class="details" style="display:none">
        Details 3
    </div>
    <button class="readMore">Read More</button>
</div>

和javascript：

function toggleVis(el) {
    var vis = el.style.display != "none";
    if (vis) {
        el.style.display = "none";
    } else {
        el.style.display = "block";
    }
    return(!vis);
}

(function() {
    var readMore = document.getElementsByClassName("readMore");
    for (var i = 0; i < readMore.length; i++) {
        readMore[i].onclick = function(e) {
            var vis = toggleVis(e.target.parentNode.getElementsByClassName("details")[0]);
            e.target.innerHTML = vis ? "Read Less" : "Read More";
        }
    }
})();

工作演示：http://jsfiddle.net/jfriend00/aMBkJ/

注意：对于旧版本的IE，这需要a shim getElementsByClassName()。

Answer 2

通过使用jQuery .prev()，您可以轻松实现它。

$('button').on('click', function(e){
   $(this).prev('div').toggle();
});

DEMO

Answer 3

您可以使用jquery

尝试此操作

<button class="readmore">Read More</button>

的jQuery

$('.readmore').click(function(){
   $(this).prev().show();
});

Answer 4

这是你如何使用jquery：

HTML代码：

<div class="stuff">
<dl id="faq">
    <dt>What shouldn't I do to the bird?</dt>
    <dd>Never try to treat a fracture at home.</dd>
</div>

JQuery代码：

jQuery(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function(){
       $(this).next().slideToggle();
   });
});

通过javascript应用样式而不使用Id

4 个答案:

DEMO