如何顯示鏈接列表作爲下拉選擇？

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>