选择框打开onclick方向 - 向上和向下显示数据

Question

不太确定这个问题是否符合SO的要求，也许是边缘问题。如果没有通知我，我会相应修改。

我已经在intraweb的每个角落搜索了以下的图书馆或教程，但是根本找不到。

我试图显示一个选择框，其中onclick向上移动一半选项，向下移动一半选项，如下图所示：

我见过一个javascript库，而不是默认选项，其中选择框中的数据向下显示 - 它向上显示。

然而，我无法找到任何可以达到上述效果的方法，其中一半数据基本上以向上方向显示而另一半以向下方向显示。

如果有人能提供一些意见，那将非常感激。

Answer 1

如果一个跳转出现的解决方案（而不是动画）是一个选项，你可以使用纯CSS而不用javascript。

HTML选择方向无法控制，因为它可以控制每个浏览器，但您可以使用单选按钮和控制相关标签。然后，只需控制悬停时标签的显示。

＆＃13;

＆＃13;

html{
  font-family:sans-serif;
  box-sizing:border-box;
}

input{
  display:none;
}
label{
  display:none;
  padding:1em;
  width: 300px;
}

input:checked + label{
  background:green;
  display:block;
}

#container{
  border:1px solid lightblue;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%);
}

#container:hover{
  transform:translate(-50%, calc(-50% + 2em));
}

#container:hover label{
  cursor: pointer;
  display:block;
  border-bottom:1px solid lightblue;
}

＆＃13;

<div id="container">
  <input type="radio" name="result" id="f2">
  <label for="f2"> France 2</label>
  <input type="radio" name="result" id="f1">
  <label for="f1"> France 1</label>
  <input type="radio" name="result" id="0" checked>
  <label for="0"> Draw</label>
  <input type="radio" name="result" id="i1">
  <label for="i1"> Ireland 1</label>
    <input type="radio" name="result" id="i2">
  <label for="i2"> Ireland 2</label>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：

显然在我的狂热中，你可以用纯CSS和＃34;我忘记了它的2018年，上面的答案只适用于桌面，并且在移动设备上惨遭失败，因为它依赖于：悬停。 所以我们需要一个小JS，只需切换一个＆＃34; .active＆＃34;而不是徘徊。

＆＃13;

＆＃13;

var container = document.getElementById("container");
var labels = document.querySelectorAll("#container label")
for (i = 0; i < labels.length; i++) {
  (function(i) {
    labels[i].addEventListener('click', function() {
      container.classList.toggle("active");
    });
  })(i);
}

＆＃13;

html{
  font-family:sans-serif;
  box-sizing:border-box;
}

input{
  display:none;
}
label{
  display:none;
  padding:1em;
  width: 300px;
}

input:checked + label{
  display:block;
  background-color:green;
  color:white;
}

#container{
  border:1px solid lightblue;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%);
}

#container.active{
  transform:translate(-50%, calc(-50% + 2em));
}

#container.active label{
  display:block;
  border-bottom:1px solid lightblue;
}

#container label{
  cursor: pointer;
}

＆＃13;

<div id="container">
  <input type="radio" name="result" id="f2">
  <label for="f2"> France 2</label>
  <input type="radio" name="result" id="f1">
  <label for="f1"> France 1</label>
  <input type="radio" name="result" id="0" checked>
  <label for="0"> Draw</label>
  <input type="radio" name="result" id="i1">
  <label for="i1"> Ireland 1</label>
    <input type="radio" name="result" id="i2">
  <label for="i2"> Ireland 2</label>
</div>

＆＃13;

＆＃13;

＆＃13;

在尝试将click事件应用于容器而不是每个单独的标签时出现了一些问题，因此JS肯定可以改进...任何帮助将不胜感激。

或者，你可以只使用jQuery。说话＆＃39;回合＆＃34;我忘记了2018年＆＃34; ...

$('#container label').click(function() {
  $(this).parent().toggleClass('active')
});

Answer 2

除非您能找到内置此功能的库，否则您只需手动更改几乎所有选择库中下拉列表的位置。

这是＆＃34;简单＆＃34;示例使用select2：

var disableSelection = false, selectionDisabledTimer;
$('#example').select2({ //#example is a select element
    minimumResultsForSearch: -1 //disable search
}).on('select2:open', function(){
    setTimeout(function(){
          var goUpBy = $('.select2-dropdown').height() / 2; //nr of px to move up
          $('.select2-dropdown')
            .removeClass('select2-dropdown--below') //remove style which hides upper border
            .css('marginTop', -goUpBy +'px');       //move dropdown up
    }, 0);
}).on('select2:opening', function(e){
    disableSelection = true;
    clearTimeout(selectionDisabledTimer);           //clear old timer (in case of multiple fast clicks)
    selectionDisabledTimer = setTimeout(function(){ //disable selection for 500ms
        disableSelection = false;
    }, 500);
}).on('select2:selecting', function(e){
    if(disableSelection){
        e.preventDefault();
    }
});

演示：https://jsfiddle.net/981usa95/7/

注意：代码看起来很乱，因为我不得不解决这个问题，因为在光标下方打开了下拉列表，光标下方的选项会立即被选中。可能存在更清洁的解决方案。