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

Question

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

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

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

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

但是我无法找到任何可以达到上述效果的东西,其中一半数据基本上以向上方向显示而另一半以向下方向显示.

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

Answer 1

如果一个跳转出现的解决方案(而不是动画)是一个选项,你可以完全没有javascript的纯CSS.

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

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

<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>

编辑:

显然,在我的狂热中"你可以用纯CSS做到这一点"我忘了它是2018年,上面的答案只适用于桌面而且在移动设备上惨遭失败,因为它依赖于:悬停.所以我们需要一个小JS,只需切换一个".active"类而不是悬停.

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

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

<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>

在尝试将click事件应用于容器而不是每个单独的标签时遇到了一些问题,以便JS可以肯定地得到改进...任何帮助将不胜感激.

或者,你可以使用jQuery.Talkin'bout"我忘了它是2018年"......

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