我正在开发一个新网站。 我有很多parrent div，每个div都隐藏了一个chlid div，当点击parrent div时，chlidren div使用slideToggle显示，它的工作非常精细，非常简单。
这是一个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时，内容显示在我的其他div上而不是按下其他div，就像不使用同位素时一样。
我认为同位素为我所有的div增加了绝对的位置，这就是为什么它覆盖其他div。
有人知道如何做到这一点吗？我一直在阅读同位素文档，但无法找到解决方案，
希望有人可以帮助我！
感谢
答案 0 :(得分：0)
您需要添加同位素容器的填充顶部并为其添加动画，填充量需要为折叠面板的高度