jquery部分展開和摺疊

Question

我正在使用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); 
}); 

Answer 1

嘗試使用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); 
}); 

Answer 2

你在正確的道路上。如果您要查找「全部」這個詞組，您需要在「顯示所有品牌」和「顯示更多品牌」之間做出決定。另外，即使是處理程序對同一個對象也沒有任何理由。可能會更容易綁定一個，只是檢查文本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); 
});