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

Question

我的html页面内容如下

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

详细信息内容最初是折叠的。当用户单击阅读更多按钮时，我需要显示详细信息内容。我可以让它成为可能。我将为详细信息 div 标签定义 id，为按钮的 onclick 事件定义 javascript。使用 id 我将更改 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 上，getElementsByClassName() 需要 a shim。 ​

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();
   });
});