下記のようにjQuaryプラグインのQuicksearchとタブ切替用のソースがあり、現状ではタブ切替してしまうと、非表示になっているリストからは検索がされない状態になっています。
■HTMLソース=======================================================================
<!-- 検索フォーム --> <form id="quicksearch"><input type="text" name="search" value="" id="id_search" /></form> <!-- タブ切替 --> <ul id="filter"> <li><a href="javascript:void(0);" class="filter01">フィルター1</a></li> <li><a href="javascript:void(0);" class="filter02">フィルター2</a></li> <li><a href="javascript:void(0);" class="filter03">フィルター3</a></li> </ul> <!-- リスト --> <ul id="filterlist"> <li class="filter01">テスト1</li> <li class="filter02">テスト2</li> <li class="filter03">テスト3</li> <li class="filter01">テスト11</li> </ul>■JavaScript=========================================================================
// filterlist タブ切替
// filterlist
$(function() {
var $setFilter = $('#filter li'),
$setList = $('#filterlist'),
$setFilterAll = $('.allitem');
var showFade = 1000,
showShut = 1000,
hideFade = 0,
hideShut = 0;
var $setFilterBtn = $setFilter.children('a'),
$setFilterList = $setList.children('li'),
$filterAllItem = $setFilterAll.attr('class');
if ($(window).width() > 641) { $setFilterBtn.click(function(){ if(!($(this).hasClass('active'))){ var filterClass = $(this).attr('class'); $setFilterList.each(function(){ if($(this).hasClass(filterClass)){ $(this).css({display:'block'}); $(this).find('*').stop().animate({opacity:'1'},showFade); $(this).stop().animate({width:'140px'},showShut); } else { $(this).find('*').stop().animate({opacity:'0'},hideFade); $(this).stop().animate({width:'140px'},hideShut,function(){ $(this).css({display:'none'}); }); } }); $setFilterBtn.removeClass('active'); $(this).addClass('active'); } }); $setFilterAll.click(function(){ $setFilterList.each(function(){ $(this).css({display:'block'}); $(this).find('*').stop().animate({opacity:'1'},showFade); $(this).stop().animate({width:'140px'},showShut); }); }); $setFilterAll.click();
}
else if ($(window).width() < 640) {
$setFilterBtn.click(function(){
if(!($(this).hasClass('active'))){
var filterClass = $(this).attr('class');
$setFilterList.each(function(){
if($(this).hasClass(filterClass)){
$(this).css({display:'block'});
$(this).find('').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'50%'},showShut);
} else {
$(this).find('').stop().animate({opacity:'0'},hideFade);
$(this).stop().animate({width:'50%'},hideShut,function(){
$(this).css({display:'none'});
});
}
});
$setFilterBtn.removeClass('active');
$(this).addClass('active');
}
});
$setFilterAll.click(function(){
$setFilterList.each(function(){
$(this).css({display:'block'});
$(this).find('*').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'50%'},showShut);
});
});
$setFilterAll.click();
}
})
ちなみに今回のページのHTMLではclassの.allitemは使用していません。
いい方法ありますでしょうか。よろしくお願いいたします。
あなたの回答
tips
プレビュー