1

jqueryの「contains」セレクターを使用して、divがクリックされたときに何をするかを決定しています...ファセットナビゲーションのセクションを展開または折りたたむ必要があります。

ただし、「contains」セレクターは、DOMが最初にロードされたときにdivのコンテンツのみを表示し、以前のjquery呼び出しによってスワップアウトされた新しいコンテンツを表示していないようです。

私はここでほとんど機能しているバージョンを持っています...トップセクションを正しく折りたたむには少し押す必要があります：http：//jsfiddle.net/brianadkins/nAabP/

HTML：

<div class="facetname" id="facetname-fbr">
        Brand
    </div>
    <ul class="facetvalues" id="facetvalues-fbr">
        <li>facet1val1</li>
        <li>facet1val2</li>
        <li>facet1val3</li>
        <li>facet1val4</li>
        <li>facet1val5</li>
        <li>facet1val6</li>
        <li>facet1val7</li>
        <li>facet1val8</li>
        <li>facet1val9</li>
        <li>facet1va10</li>
        <li>facet1val11</li>
        <li>facet1val12</li>
        <li>facet1val13</li>
    </ul>
    <div class="slidermenu" id="slidermenu-fbr">
    </div>

Javascript：

var ListLengthHidingTrigger = 7;
var InitialListItems = 4;

if ($("#facetvalues-fbr li").length > ListLengthHidingTrigger) {
    $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
    $('#slidermenu-fbr').html('Show All Brands');
}
$('div#slidermenu-fbr:contains("All")').click(function() {
                $('#facetvalues-fbr li').show(); // hide all but first 2 sections
                $('#slidermenu-fbr').html('Show Fewer Brands');            
});
$('div#slidermenu-fbr:contains("Fewer")').click(function() {
                $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
                $('#slidermenu-fbr').html('Show More Brands');            
});
$('#facetname-fbr').click(function() {
    $('#facetvalues-fbr').slideToggle(0);
});
4

2 に答える 2

6

jQuery live（）を使用してみてください

http://jsfiddle.net/maniator/nAabP/8/

コード：

var ListLengthHidingTrigger = 7;
var InitialListItems = 4;

if ($("#facetvalues-fbr li").length > ListLengthHidingTrigger) {
    $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
    $('#slidermenu-fbr').html('Show All Brands');
}
$('div#slidermenu-fbr:contains("All")').live('click',function() {
                $('#facetvalues-fbr li').show(); // hide all but first 2 sections
                $('#slidermenu-fbr').html('Show Fewer Brands');            
});
$('div#slidermenu-fbr:contains("Fewer")').live('click',function() {
                $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
                $('#slidermenu-fbr').html('Show All Brands');            
});
$('#facetname-fbr').click(function() {
    $('#facetvalues-fbr').slideToggle(0);
});
于 2011-03-30T19:49:16.320 に答える
0

あなたは正しい道を進んでいます。「すべて」というフレーズを探す場合は、「すべてのブランドを表示」と「その他のブランドを表示」のどちらかを決定する必要があります。さらに、同じオブジェクトのハンドラーにさえバインドする理由はありません。1つをバインドして、Allその効果のテキストまたは何かをチェックする方が簡単な場合があります。また、使用live()

http://jsfiddle.net/Jaybles/nAabP/7/

var ListLengthHidingTrigger = 7;
var InitialListItems = 4;

if ($("#facetvalues-fbr li").length > ListLengthHidingTrigger) {
    $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
    $('#slidermenu-fbr').html('Show All Brands');
}
$('#slidermenu-fbr').live('click',function() {
    if ($(this).text().indexOf('All') >0){
        $('#facetvalues-fbr li').show(); // hide all but first 2 sections
        $('#slidermenu-fbr').html('Show Fewer Brands');            
    }else{
        $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
        $('#slidermenu-fbr').html('Show All Brands');         
    }
});

$('#facetname-fbr').click(function() {
    $('#facetvalues-fbr').slideToggle(0);
});
于 2011-03-30T19:54:36.537 に答える