使用jquery同位素進行排序並結合slideToggle div
[英]using jquery isotope for sorting combined with slideToggle divs
問題描述
我正在一個新網站上。 我有很多parrent div，每個div都隱藏了一個chlid div，單擊parrent div時，使用slideToggle顯示chlidren div，它工作得很好，非常簡單的代碼。
這是一個jsfiddle： http : //jsfiddle.net/mmk933wf/4/
這是我的HTML：
<div id="content">
<div class="bloc_artiste" id="peter_christopherson_aka_sleazy" data-date-created="2010" data-artist="christopherson aka sleazy" data-band="throbbing gristle, coil, ptv">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">christopherson aka sleazy</span>
peter christopherson aka sleazy
</td>
<td class="band"><span class="band_DSC" style="display:none">throbbing gristle, coil, ptv</span>
throbbing gristle, coil, ptv
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2010</span>
2010</td>
</tr>
</table>
<div class="bloc_top_ten">
<p class="italic">Nowadays, I rarely use music in the way I did when I was a young - as a palliative, a tranquilliser, wallpaper to cover over uncomfortable or embarrassing cracks in the passage of life. At the age of 50 I have come to prefer the silence, or rather<p>
</div>
</div>
<div class="bloc_artiste" id="chris_carter" data-date-created="2009"
data-artist="carter" data-band="throbbing gristle / chris and cosey">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">carter</span>
chris carter
</td>
<td class="band"><span class="band_DSC" style="display:none">throbbing gristle / chris and cosey</span>
throbbing gristle / chris and cosey
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2009</span>
2009</td>
</tr>
</table>
<div class="bloc_top_ten">
<p class="italic">I've been playing these albums regularly for many years, first on tape and vinyl, then CD and now on my iPod. They are listed in order of release date, not in any order of preference.<p>
<h1>pennies from heaven compilation - various artists (original 1929-1938 version) </h1><br>
</div>
</div>
<div class="bloc_artiste" id="ian_svenonius" data-date-created="2010"
data-artist="svenonius" data-band="the make up">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">svenonius</span>
ian svenonius
</td>
<td class="band"><span class="band_DSC" style="display:none">the make up</span>
the make up
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2010</span>
2010</td>
</tr>
</table>
<div class="bloc_top_ten">
<h1>short novel - by ian </h1><br>
<p><p>« The Creatures » were standing in groups 3 or 4 deep, throughout the park at the intersection of 12th street and Hilliard place.</p>
</div>
</div>
</div>
我的CSS：
.bloc_artiste{width:100%;}
.bloc_top_ten {
font-size: 0px;
line-height: 0px;
padding-top: 15px;
padding-bottom: 10px;
display: none;
border-top: 2px solid white;
}
h1 {
font-weight: normal;
text-transform: capitalize;
border-bottom: 2px solid;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
和我的JQuery：
$(document).ready(function(){
ligne_open();
});
function ligne_open(){
$('.bloc_artiste').click(function () {
var ID = '#' + $(this).attr('id');
$(this).siblings().children().next().slideUp(500);
$(this).children().next('div').slideToggle(500, function(){
$('html, body').animate({
scrollTop: $(ID).offset().top
}, 500);
});
$(this).siblings().children().next().slideUp(500);
return false;
});
$('.bloc_artiste').hover(function(){
$('.bloc_artiste').not(this).css('opacity','0.4');
},function(){
$('.bloc_artiste').not(this).css('opacity','1');
});
}
現在我想使用data-sort-value對div進行排序，因此我發現jquery同位素對此很合適。 我已經安裝了jquery插件，並編輯了我的代碼。 也可以使用多個排序日期對div進行排序。
這是一個帶有同位素的jsfiddle： http : //jsfiddle.net/4m0oL1zh/1/
我的HTML：
<table class="ligne_libelle">
<tr>
<td class="artist">
ARTIST
<span class="sorts">
<span class="button" data-sort-value="artist">▲</span>
<span class="button" data-sort-value="artist_DSC">▼</span>
</span>
</td>
<td class="band">
BAND
<span class="sorts">
<span class="button" data-sort-value="band">▲</span>
<span class="button" data-sort-value="band_DSC">▼</span>
</span>
</td>
<td class="year">
YEAR
<span class="sorts">
<span class="button" data-sort-value="year">▲</span>
<span class="button" data-sort-value="year_DSC">▼</span>
</span>
</td>
</tr>
</table>
<div id="content">
<div class="bloc_artiste" id="peter_christopherson_aka_sleazy" data-date-created="2010" data-artist="christopherson aka sleazy" data-band="throbbing gristle, coil, ptv">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">christopherson aka sleazy</span>
peter christopherson aka sleazy
</td>
<td class="band"><span class="band_DSC" style="display:none">throbbing gristle, coil, ptv</span>
throbbing gristle, coil, ptv
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2010</span>
2010</td>
</tr>
</table>
<div class="bloc_top_ten">
<p class="italic">Nowadays, I rarely use music in the way I did when I was a young - as a palliative, a tranquilliser, wallpaper to cover over uncomfortable or embarrassing cracks in the passage of life. At the age of 50 I have come to prefer the silence, or rather<p>
</div>
</div>
<div class="bloc_artiste" id="chris_carter" data-date-created="2009"
data-artist="carter" data-band="throbbing gristle / chris and cosey">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">carter</span>
chris carter
</td>
<td class="band"><span class="band_DSC" style="display:none">throbbing gristle / chris and cosey</span>
throbbing gristle / chris and cosey
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2009</span>
2009</td>
</tr>
</table>
<div class="bloc_top_ten">
<p class="italic">I've been playing these albums regularly for many years, first on tape and vinyl, then CD and now on my iPod. They are listed in order of release date, not in any order of preference.<p>
<h1>pennies from heaven compilation - various artists (original 1929-1938 version) </h1><br>
</div>
</div>
<div class="bloc_artiste" id="ian_svenonius" data-date-created="2010"
data-artist="svenonius" data-band="the make up">
<table class="ligne_info">
<tr>
<td class="artist"><span class="artist_DSC" style="display:none">svenonius</span>
ian svenonius
</td>
<td class="band"><span class="band_DSC" style="display:none">the make up</span>
the make up
</td>
<td class="year">
<span class="year_DSC" style="display:none"> 2010</span>
2010</td>
</tr>
</table>
<div class="bloc_top_ten">
<h1>short novel - by ian </h1><br>
<p><p>« The Creatures » were standing in groups 3 or 4 deep, throughout the park at the intersection of 12th street and Hilliard place.</p>
</div>
</div>
</div>
我的jQuery：
$(document).ready(function(){
ligne_open();
isotope_sort();
});
function ligne_open(){
$('.bloc_artiste').click(function () {
var ID = '#' + $(this).attr('id');
$(this).siblings().children().next().slideUp(500);
$(this).children().next('div').slideToggle(500, function(){
$('html, body').animate({
scrollTop: $(ID).offset().top
}, 500);
});
$(this).siblings().children().next().slideUp(500);
return false;
});
$('.bloc_artiste').hover(function(){
$('.bloc_artiste').not(this).css('opacity','0.4');
},function(){
$('.bloc_artiste').not(this).css('opacity','1');
});
}
function isotope_sort(){
// init Isotope
var $container = $('#content').isotope({
layoutMode: 'vertical',
itemSelector: '.bloc_artiste',
sortAscending: {
artist: true,
band: true,
year: true,
artist_DSC: false,
band_DSC: false,
year_DSC: false
},
getSortData: {
artist: '.artist',
band: '.band',
year: '.year',
artist_DSC: '.artist_DSC',
band_DSC: '.band_DSC',
year_DSC: '.year_DSC'
}
});
// bind sort button click
$('.sorts').on( 'click', 'span', function() {
var sortValue = $(this).attr('data-sort-value');
$container.isotope({ sortBy: sortValue });
});
}
現在的問題是，當我要對我的子div進行slideToggle時，內容將顯示在我的其他div上，而不是像在不使用同位素時那樣按下其他div。
我認為同位素為我的所有div添加了絕對位置，這就是為什么它會覆蓋其他div。
有人知道實現此目的的方法嗎？ 我一直在閱讀同位素文檔，但找不到解決方案，
希望有人可以幫助我！
謝謝
1 個解決方案
解決方案1
0 2015-02-12 07:31:24
您需要添加同位素容器的padding-top並為其設置動畫，並且padding的數量必須為折疊面板的高度
jQuery slidetoggle（）div使用多個ID
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.