Question

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

<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）测试“阻止”而不是“无”，反转比较，但使用相同的方法：

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>

从css中删除display: none;：

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库，你可以使用这个code使脚本更简单：

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

P.S。顺便说一句，使用<span>元素代替<li>并不是一个好习惯。更好的方式是this，或者您可以将<span>元素重命名为<li>。

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

2 个答案: