2

私は小さなアコーディオンのようなスクリプトを作りました。技術的には機能しますが、2回目のクリックで。修正方法は？

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

2 に答える 2

2

st.displayインライン スタイルではなく CSS で設定されているため、最初は空です。これを修正するには 3 つの方法があります。

(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) 「none」ではなく「block」でテストし、比較を逆にしますが、それ以外は同じ方法を使用します。

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/

于 2012-11-25T12:23:21.507 に答える
1

兄弟要素のスタイルが空である を初めてクリックしたときは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>。

于 2012-11-25T12:38:51.407 に答える