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

Question

我制作了一个类似 Accordion 的小脚本。从技术上讲，它是有效的，但在第二次单击时。如何解决？

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

fiddle :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");
        }
    };
}

fiddle :http://jsfiddle.net/YcEjF/2/

(3) 显式设置样式标签而不是使用 css。因此，保持 javascript 不变，但更改 html，如下所示:

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

并从 CSS 中删除 display: none;:

span { margin: 15px; }​

fiddle :http://jsfiddle.net/YcEjF/3/