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

Question

我想顯示一個鏈接列表，如下拉選擇，如果可能的話，不會丟失語義。 這是我嘗試過的。 CSS顯然現在不起作用。 對於選擇我在JavaScript中使用location.href模擬了一點鏈接，但它失去了語義值，我猜測它是可訪問性的。

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

<option>不接受嵌套的HTML元素。

你要做的就是設計你的<ul> <li>並使它看起來像一個原生的下拉。

這是一個工作示例：

https://codepen.io/anon/pen/boxKRz

Answer 2

WAI使用role=listbox和role=option提供了多個模擬列表框的示例。 這需要使用aria-activedescendant和aria-selected以獲得更好的可訪問性支持。

請參閱下面的示例：3.13列表框

對於樣式，您可以復制用戶代理樣式表使用的樣式。

話雖如此，將鏈接列表設置為下拉選項可能是一個壞主意，因為它可能導致不可預測的上下文更改

Answer 3

我認為你正在尋找這樣的東西？沒有使用Jquery和Bootstrap解決方案

網址下拉列表

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

工作小提琴

Answer 4

我只使用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;
}

鏈接： https ： //codepen.io/zsydyc/pen/VMGGPv

Answer 5

只有CSS和HOVER的所有解決方案都能完全正常運行！ 這說明沒有懸停在移動設備上是不對的...懸停狀態映射到手指點擊並在每個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> 

Answer 6

快速制作組合框而不使用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;