slideToggle div onclick，带有 div 排序选项

Question

我在我的网站上开发了一种使用各种排序选项对 divs (.ligne) 进行排序的方法。按名称、日期、状态和类型排序。我有一个运行良好的 jquery 代码，我需要多做一些工作以减轻它的负担，但它确实有效。

每个 div 都有一个 children div，当点击 div 时，children div slidetoglle。也很好用。

我没有使用任何插件，只使用 bootstrap css。

但是当我点击对我的 div 进行排序时，children div 的滑动开关就不再起作用了。无法找出它的来源...

例如，当您第一次加载页面时，尝试点击 "AGDE CAPE HOTEL"，divs 可以正常打开。但是一旦您点击箭头对内容进行排序，它就不再起作用了...

这是我的 HTML :

<div class="container titre">

  <div class="row">

  <div class="col-xs-3 text-right">

  <div class="title">PROJECT</div>

    <span id="nom_ASC" class="sort">&#8595;</span> <span id="nom_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">YEAR</div><span id="annee_ASC" class="sort">&#8595; </span> <span id="annee_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">STATUS</div><span id="statut_ASC" class="sort">&#8595;</span> <span id="statut_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">TYPE</div><span id="type_ASC" class="sort">&#8595;</span> <span id="type_DSC" class="sort">&#8593;</span>

  </div>

  </div>

</div>

<div id="index" class="container">

  <div class="row ligne">

    <div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">WORK</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
    <div class="col-xs-3 annee">2015</div> 
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">MOVE</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
    <div class="col-xs-3 annee">2016</div> 
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEARN</div> 

  </div>

</div>

我的 CSS :

body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}
.sort {cursor:pointer}

用于排序的Jquery :

var $divs = $("div.row.ligne");

/* VILLE */

$('#nom_ASC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".nom").text() > $(b).find(".nom").text();
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

$('#nom_DSC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".nom").text() > $(b).find(".nom").text());
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

/* ANNEE */

$('#annee_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".annee").text() > $(b).find(".annee").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#annee_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".annee").text() > $(b).find(".annee").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* STATUT */

$('#statut_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".statut").text() > $(b).find(".statut").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#statut_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".statut").text() > $(b).find(".statut").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* TYPE */

$('#type_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".type").text() > $(b).find(".type").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#type_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".type").text() > $(b).find(".type").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

和 Jquery 为 div 打开 (slideToggle)

  $('.ligne').click(function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

这里有一个 jsfiddle 可以看到它的实际效果： http://jsfiddle.net/C2heg/726/

谢谢，

Answer 1

$('body').on('click', '.ligne', function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

Working Demo

看看Event binding on dynamically created elements?

slideToggle div onclick，带有 div 排序选项

slideToggle div onclick, with div sorting options

css

sorting

jquery

slidetoggle

twitter-bootstrap