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

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

这是我的代码，它检查是否有上升或下降的地方，但目前列表顺序并没有改变

$("#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");
    }
});

$（“#按钮”）。在（'click'，function（）上{
//工具栏与视口顶部的距离减去页眉（100px）
var scrollTop=$（窗口）.scrollTop（），
elementOffset=$（this）.offset（）.top，
distanceTop=（elementOffset-scrollTop-100）；
//到视口底部的距离
var distanceBottom=$（window）.height（）-distanceTop-150；
//获取下拉列表的高度
var dropdownMoreHeight=$（“#dropdown ul”）.innerHeight（）；
//检查哪个方向的下拉空间更大
if（distanceTop

到目前为止，我找到的反向ul列表的代码是

$（'dropdown'）.append（$（'dropdown'）.find（'li'）.get（）.reverse（））

问题是当下拉菜单下降时，如何只反转一次
 订正答复
我已经修改了，以便在单击事件之前首先声明下拉列表。然后我们根据逻辑简单地调用下行列表或上行列表

// 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());
    }
});

看看我的叉子。
现在，如果它打开，将显示：


八,
七,
六,
五,
四,
三,
二,
一,

如果它向下打开，它就会显示出来


一,
二,
三,
四,
五,
六,
七,
八,

我相信这就是你的要求。
好的。如果有人对JSFIDLE感兴趣，我自己找到了解决方案

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());
      }
    });

埃尔维斯，我已经看过你的代码了。如果您将脚本和html放在一个jsfiddle.hi中，这可能会有所帮助，而不是完全使用类似的fiddle。现在，如果您向上滚动，它会反向打开。与您期望的结果相混淆。请向我们表达您期望在以下实例中看到的内容（dropdown=1,2,3,4,5,6,7,8）和（dropup=8,7,6,5,4,3,2,1）。是的。（下拉=1,2,3,4,5,6,7,8）和（下拉=8,7,6,5,4,3,2,1）。它应该总是按这个顺序。您的小提琴仅在前两次单击时才起作用，单击1=确定，向下滚动，单击2=确定，再次向上滚动，向上滚动的顺序与向下滚动的顺序相同。应该总是（dropup=1,2,3,4,5,6,7,8）和（dropup=8,7,6,5,4,3,2,1）@Elvis谢谢你的澄清。我已经更新了JSFIDLE，并且修改了上面的答案。我相信这是你现在想要的方式。对不起，我认为你小提琴的顺序总是显示（1,2,3,4,5,6,7,8）。也许我遗漏了什么(