如何将链接列表显示为下拉选择？

Question

我想显示一个像下拉选择一样的链接列表，如果可能的话，不要丢失语义。这是我尝试过的。CSS现在显然不起作用。对于选择，我location.href在 JavaScript 中模拟了一些链接，但它失去了语义价值，我猜它失去了可访问性。

没有 jQuery 和 Bootstrap，

如何将链接列表显示为下拉选择？

document.getElementById("0").addEventListener("change", function (event) {
  location.href = event.target.value;
});

.like-select {
  appearance: select;
}

<p>Semantic wanted</p>
<ul class="like-select">
  <li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
  <li><a href="https://stackoverflow.com">Stack Overflow</a></li>
  <li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>

<p>Look and feel wanted especially on mobile</p>
<select id="0">
  <option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
  <option value="https://stackoverflow.com">Stack Overflow</option>
  <option value="http://www.echojs.com/">Echo Js</option>
</select>

Answer 1

WAI 提供了多个使用role=listbox和的模拟列表框示例role=option。这需要使用aria-activedescendant和aria-selected来获得更好的可访问性支持。

请参阅第 3.13 节中的示例：列表框

对于样式，您可以复制用户代理样式表使用的样式。

话虽这么说，将链接列表设置为下拉选择可能是一个坏主意，因为它可能会导致上下文发生不可预测的变化

Answer 2

我想你正在寻找这样的东西？不使用 Jquery 和 Bootstrap 解决方案

网址下拉菜单

超文本标记语言

<div class="dropdown">
  Select URL...
  <div class="dropdown-content">
   <ul class="like-select">
  <li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
  <li><a href="https://stackoverflow.com">Stack Overflow</a></li>
  <li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>
  </div>
</div>

CSS

.dropdown {
    position: relative;
    display: inline-block;
        padding: 10px;
       width:160px;

    border: 1px solid;
}
.dropdown:after{
  content: '\25BC';
  position: relative;
    font-size:14px;
   float:right;


}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: inherit;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   top: 39px;
    left: 0;
    width: 100%;
    z-index: 1;
}
li a{
  text-decoration:none;
    color: black;
    padding:10px;
}
ul{
  padding:0;
  margin:0;
}
li{
      list-style: none;
    padding:10px;

  border-bottom:1px solid black;
}
li:hover{
  background-color:gray;

}
li:hover a{
    color:white;
}

JS

var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
    var x = document.getElementById(attribute);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

};
for (var i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener('click', myFunction, false);
}

工作小提琴