1

最後に、解決策はありますが、まだ少し問題があります。

私はこのリストを持っています

<ul id="tricky_list"> 
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>​

この関数を使用して、最初の3つ（3つ）の要素のみを表示し、残りの2つをマウスオーバーで表示したい

var limit = 3;
var list = $("#tricky_list");
var more = 0;

function tricky_hide(){
    var morec = 0;
    $("li", list).each(function(index) {
        if (index >= limit) {
            $(this).hide();      
            morec = index - limit + 1;
        }
    });

    if (!more) more = morec;

    if (more) {
        list.append('<li class="more">' + more + ' more</li>');
        return true;
    }
    return true;
}


if (tricky_hide()) {
    list.live("mouseover", function() {
        $("li", list).each(function(index) {
            $(this).show();
        });
        $("li.more", list).hide();
    });

    list.live("mouseout", function() {
        tricky_hide();
    });
}

完全に機能しますが、いくつかの説明が必要です。私はこの機能を持っています

if (more) {
            list.append('<li class="more">' + more + ' more</li>');
            return true;
        }

<li class="more">これは、 mouseoutイベントにも追加されます。この要素で「マウスオーバー」と「マウスアウト」を無限に繰り返すと、HTMLドキュメントに無限に書き込まれます<li class="more">。これを防ぐ方法は？この要素を（ページの読み込み時に）一度だけ追加するにはどうすればよいですか？

ありがとうございます！

フィドル： http： //jsfiddle.net/MYM2C/

4

1 に答える 1

3

私は解決策が次のように簡単であるべきだと思います：

li_element = list.find('li.more');
if (more && !li_element.length) {
    list.append('<li class="more">' + more + ' more</li>');
    return true;
} else {
    li_element.show();
}
于 2012-10-16T11:48:59.937 に答える