修订答案

Question

我有一个带有列表菜单的bootstrap下拉列表，我需要根据下拉列表的上升或下降来重新排序。

这是我的代码，它检查是否有上下位置，但目前列表顺序没有变化。

$("#button").on('click', function(){
    //Distance of toolbar from viewport top minus header (100px)
    var scrollTop      = $(window).scrollTop(),
        elementOffset  = $(this).offset().top,
        distanceTop    = (elementOffset - scrollTop - 100);
    //Distance to bottom of viewport
    var distanceBottom = $(window).height() - distanceTop - 150;
    //Get height of dropdown
    var dropdownMoreHeight = $("#dropdown ul").innerHeight();

    //Check which direction is more room for dropdown
    if (distanceTop < dropdownMoreHeight && distanceTop < distanceBottom){
        $(this).addClass("go-down");
    }else{
        $(this).removeClass("go-down");
    }
});

到目前为止发现的反向ul列表的代码是 $('#dropdown').append($('#dropdown').find('li').get().reverse());

问题是如何在下拉列表中仅撤消一次？

Answer 1

修订答案

我已修改jsfiddle以在点击事件之前首先声明下拉列表/向上列表。然后，我们只需根据逻辑调用下载列表或上架列表。

// set the dropdown/up lists as variable before the click event

var downlist = $('#dropdown').find('li').get();
var uplist = downlist.reverse();

$("#button").on('click', function(){

    //Check which direction is more room for dropdown
    if ($(window).scrollTop() >= 50)         {

        // Now, replace the list with the var downlist
        $("#dropdown").addClass("go-down").find('ul').append(downlist);
    }else{

        // Now, replace the list with the var downlist
        $("#dropdown").removeClass("go-down").find('ul').append(uplist);
    }
});

旧答案

在你提供jsfiddle后，它看起来相当直接。我只是在ELSE之后添加了反向脚本。

$("#button").on('click', function(){

    //Check which direction is more room for dropdown
    if ($(window).scrollTop() >= 50)         {
        $("#dropdown").addClass("go-down");
    }else{
        $("#dropdown").removeClass("go-down");
        /*here*/
        $('#dropdown').append($('#dropdown').find('li').get().reverse());
    }
});

请参阅我的分叉jsfiddle。现在，如果它打开，它会显示：

8
7
6
5
4
3
2
1

并且，如果它打开，则显示

1
2
3
4
5
6
7
8

我相信这就是你所要求的。

Answer 2

确定。如果有兴趣的人是Jsfiddle

，那就解决我的问题

var originalList = $('#dropdown').find('li').get();
    $('#myDropdown').on('show.bs.dropdown', function () {
      //Check which direction is more room for dropdown
        if ($(window).scrollTop() >= 50){
          $("#dropdown").addClass("go-down").append(originalList.reverse());
        }
    });
    $('#myDropdown').on('hide.bs.dropdown', function () {
        if ($("#dropdown").hasClass( "go-down" )){
        $("#dropdown").removeClass("go-down").append(originalList.reverse());
      }
    });

https://jsfiddle.net/elviscau/y681zvam/14/

根据方向重新排序UL下拉列表

2 个答案:

修订答案

旧答案