javascript - Onclick 应用于许多元素，在第二次点击时触发

Question

我制作了一个类似手风琴的小脚本。从技术上讲，它可以工作，但在第二次点击时。如何解决？

http://jsfiddle.net/YcEjF/

<ul>
    <li>chapter 1</li><span>lorem ipsum</span>
    <li>chapter 2</li><span>lorem ipsum</span>
    <li>chapter 3</li><span>lorem ipsum</span>
    <li>chapter 4</li><span>lorem ipsum</span>
    <li>chapter 5</li><span>lorem ipsum</span>
</ul>

var a = document.getElementsByTagName('li');
for (var i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        var st = this.nextSibling.style;
        if (st) {
            st.display = (st.display == "none" ? "block" : "none");
        }
    };
}

Answer 1

st.display开始是空的，因为它是在 CSS 中设置的，而不是内联样式。有三种方法可以解决此问题。

（1）提前在javascript中显式设置样式：

var a = document.getElementsByTagName('li');
for (var i = 0; i < a.length; i++) {
    a[i].nextSibling.style.display = 'none';      // <-- Added this line
    a[i].onclick = function() {
        var st = this.nextSibling.style;
        if (st) {
            st.display = (st.display == "none" ? "block" : "none");
        }
    };
}

小提琴：http: //jsfiddle.net/YcEjF/1/

(2) 测试“block”而不是“none”，颠倒比较，否则使用相同的方法：

var a = document.getElementsByTagName('li');
for (var i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        var st = this.nextSibling.style;
        if (st) {
            st.display = (st.display == "block" ? "none" : "block");
        }
    };
}

小提琴：http: //jsfiddle.net/YcEjF/2/

(3) 显式设置样式标签，而不是使用css。所以让你的javascript保持不变，但改变你的html，如下所示：

<ul>
    <li>chapter 1</li><span style="display: none;">lorem ipsum</span>
    ...
</ul>

并将其display: none;从 css 中删除：

span { margin: 15px; }​

小提琴：http: //jsfiddle.net/YcEjF/3/

Answer 2

当您第一次单击同级元素样式为空st.display == ""时，您应该处理此行为：

var a = document.getElementsByTagName('li');
for (var i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        var st = this.nextSibling.style;
        if (st) {
            // Updated condition: added st.display == ""
            st.display = (st.display == "none" || st.display == "" ? "block" : "none");
        }
    };
}​

如果您有 jQuery 库，则可以使用此代码使脚本更简单：

$('li').toggle(function(){
  $(this).next().attr('style', 'display: block;');
},function(){
  $(this).next().attr('style', 'display: none;');
})​

PS 顺便说一句，使用<span>元素而不是<li>. 更好的方法看起来像这样，或者您可以将<span>元素重命名为<li>.