如何显示链接列表作为下拉选择？
我想显示一个链接列表，如下拉选择，如果可能，不会丢失语义。这是我的尝试。 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>
的WAI提供了使用role=listbox和role=option仿真列表框的多个例子。这需要使用aria-activedescendant和aria-selected以获得更好的可访问性支持。
的OpenAjax联盟也有一个工作accessible combobox
对于造型的例子，你可以复制style used by the user agent stylesheet.
话虽这么说，它可能是一个坏主意样式列表的链接作为下拉选择，因为它可能导致unpredictable change of context
LSKhan提供的解决方案是从可访问性角度来看的吗？ –
@WalleCyril没有键盘支持 – Adam
<option>不采取嵌套HTML元素。
你需要做的是风格你的<ul> <li>并使其外观和感觉像一个本机下拉。
这里是一个工作示例：
如果可能的话，不丢失''的语义 –
没有jQuery或引导 –
我做了这个样本仅使用CSS，希望这将帮助ü
HTML：
<ul>
<li id="box">Hover Me
<ul>
<li class="dropdown_item"><a href="http://thinkio.ca">111</a></li>
<li class="dropdown_item"><a href="http://thinkio.ca">222</a></li>
</ul>
</li>
</ul>
CSS：
ul, li {
list-style-type: none;
margin: 0;
padding:0;
height:30px;
line-height: 30px;
width: 100px;
}
#box {
border: 1px solid #bbb;
display: inline-block;
cursor:default;
}
ul li ul {
display: none;
position: absolute;
top: 40px; /* change this value based on your browser */
left: 10px;
}
ul li:hover>ul:last-child {
display: block;
width: 100px;
}
ul li ul li:hover {
background-color:rgb(33,144,255);
color:white;
border: 1px solid #bbb;
}
由于OP标记为可访问性，我假设他们关心用键盘导航的用户。你的例子需要一点点工作才能键盘访问（能够用键盘对焦和浏览选项）。 – steveax
行为不像我的'
我认为你正在寻找这样的东西？如果不使用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);
}
只用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>
做一个组合框不使用的ID选择，并保持HTML如上 链接的快捷方式：https://codepen.io/gabep/pen/KXJoEK
第一的CSS他们JS
拳头我风格的UL：
.like-select {
height:21px;
overflow:hidden;
width:8%;
}
.like-select li{
appearance: select;
color:red;
border-left: 1px solid blue;
border-right: 1px solid blue;
list-style-type: none;
}
做出的第一个孩子你的盒子：
.like-select li:first-child {
border: 1px solid blue;
}
使最后一个孩子下拉列表的底部：
.like-select li:last-child {
border-bottom: 1px solid blue;
}
给列表项悬停效果：
.like-select li a:hover {
background-color: green !important;
}
.like-select li:first-child a:hover{
background-color: none !important;
}
a {
color:blue;
text-decoration:none;
width:100%;
}
的JS：
function load() {
//add the main item to your list you need to have it in your drop-down:
//使用querySelectorAll找到任何类型的具体内容，并把在列表
var addfirst= document.querySelectorAll(".like-select li:first-child");
var ullist = document.querySelectorAll(".like-select");
ullist[0].innerHTML = addfirst[0].outerHTML + ullist[0].innerHTML ;
y = document.querySelectorAll(".like-select li");
// do an onlick here instead of mouse over
y[0].onmouseenter = function(){
//resize wrapper event - im not going to do a toggle because you get the idea
var comboboxwrapper = document.querySelectorAll(".like-select");
comboboxwrapper[0].style.height = "100px";
}
// loop though all other items except first-child
var i;
for (i = 1; i < y.length; i++) {
y[i].onmouseover = function(){
var selecteditem =document.querySelectorAll(".like-select li");
//在更改值价值悬停的组合框
var mainitem = document.querySelectorAll(".like-select li:first-child");
mainitem[0].innerHTML = this.innerHTML;
};
} }
window.onload = load;
d o你想要标签的下拉菜单吗？ –
是的，但在移动设备上具有与“
我觉得您可以尝试模仿本地选择框的外观和风格，但这绝不会是精确的。这足够吗？ – KillahB