jquery - 使用 jquery isotope 结合 slideToggle div 进行排序

Question

我正在开发一个新网站。我有许多 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&#039;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>&laquo;&nbsp;The Creatures&nbsp;&raquo; 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">&#x25B2;</span>
                <span class="button" data-sort-value="artist_DSC">&#x25BC;</span>
            </span>
        </td>
        <td class="band">
            BAND
            <span class="sorts">
                <span class="button" data-sort-value="band">&#x25B2;</span>
                <span class="button" data-sort-value="band_DSC">&#x25BC;</span>
            </span>
        </td>
        <td class="year">
            YEAR
            <span class="sorts">
                <span class="button" data-sort-value="year">&#x25B2;</span>
                <span class="button" data-sort-value="year_DSC">&#x25BC;</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&#039;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>&laquo;&nbsp;The Creatures&nbsp;&raquo; 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 的原因。

有谁知道解决这个问题的方法吗？我一直在阅读同位素文档，但找不到解决方案，

希望有人能帮我解决这个问题!

谢谢

Answer 1

您需要为同位素容器添加 padding-top 并设置动画，填充量需要为折叠面板的高度