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

Question

我想显示一个链接列表，如下拉选择，如果可能，不会丢失语义。这是我的尝试。 CSS现在显然不起作用。对于我选择的模拟链接有点与location.href在JavaScript中，但它失去了语义值，我猜可达性。

没有jQuery和引导，

如何显示链接的下拉列表中选择向下？

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

我认为你正在寻找这样的东西？如果不使用jQuery和引导解决方案

下拉对于URL

HTML

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

Working Fiddle

Answer 2

只用CSS和悬停正在完全地井移动所有解！那意味着没有移动悬停是不正确的......悬停状态映射到一个手指轻点，并在每一个brwoser每个移动操作系统上工作！通常情况下，默认行为已经做到了这一点，在某些情况下，你可以使它更容易与一些JS ...

如果你想要一个下拉只是与CSS和没有悬停在这里来了一个复选框实现的其他解决方案:(只是谷歌“的CSS复选框黑客”以获取更多信息）

.checkhack { 
 
    display: none; 
 
} 
 

 
#menu { 
 
    display: none; 
 
} 
 

 
#menutoggle:checked + #menu { 
 
    display: block; 
 
}

<label for="menutoggle" class="checklabel">OPEN MENU</label> 
 
<input id="menutoggle" class="checkhack" type="checkbox" /> 
 
<ul id="menu"> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
</ul>