【发布时间】：2015-05-26 18:26:11
【问题描述】：
我正在开发一个新网站。 我有很多父 div，每个 div 都隐藏了一个 chlid div，当单击父 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 isotope 很适合。我已经安装了 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 的原因。
有人知道如何解决这个问题吗？我一直在阅读同位素文档，但找不到解决方案，
希望有人可以帮助我！
谢谢
【问题讨论】：
标签： jquery css sorting jquery-isotope slidetoggle