logo标签列表

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

javascripthtmlcssaccessibilitysemantic-markup
5

我希望能够像下拉选择框一样显示链接列表，如果可能的话不要失去语义。这是我尝试过的方法。现在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>

你想要一个<a>标签的下拉菜单吗？ - Matthew Barbara
是的，但在移动设备上具有与<select>相同的本地外观和感觉。 - Walle Cyril
1
我觉得你可以尝试模仿原生选择框的外观和感觉，但永远不可能完全一样。这样可以吗？ - KillahB
你会使用 JavaScript 吗？ - Blues Clues
是的，但没有它更好。 - Walle Cyril
6个回答
5
从可访问性的角度来看，LSKhan提供的解决方案是否好？ - Walle Cyril
@WalleCyril 没有键盘支持。 - Adam
5

我认为你需要的是这样的东西？不使用Jquery和Bootstrap解决方案

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

它可以在桌面上运行，但在移动端没有悬停功能，只能触摸和滑动。 - Walle Cyril
让我把它改成点击。 - Liaqat Saeed
所有只使用CSS和Hover的解决方案在移动端都运行完美！那些声称移动设备上没有hover状态的评论并不完全正确... Hover状态被映射为手指轻触，并且在每个移动操作系统的每个浏览器中均可正常工作，你尝试过吗？我已经开发了数十个仅基于CSS的导航，在移动设备上完美运行！通常默认行为已经可以胜任，但在某些情况下，您可以使用一些JS使其更易用... - ToTaTaRi
如果你想要一个没有hover效果的纯CSS下拉菜单，可以看看"CSS checkbox hack"（在谷歌搜索一下），你会找到另一个相当不错的解决方案！也许我会用这种方法发布一个答案... - ToTaTaRi
这个解决方案完美地运行，唯一的问题是如何在下拉菜单之外添加点击事件。我尝试在屏幕上的随机位置点击，但下拉菜单仍然存在。 - jmike
4

<option>不支持嵌套HTML元素。

你需要对<ul> <li>进行样式设置，使其看起来和操作起来像一个本地下拉菜单。

这里有一个可用的例子:

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

1
不使用jQuery或Bootstrap - Walle Cyril
1

所有仅使用CSS和悬停的解决方案在移动设备上都能完美运行！那些声称移动设备上没有悬停的评论并不完全正确... 悬停状态被映射到手指轻触，并在每个移动操作系统的每个浏览器上工作！通常默认行为已经可以胜任，但在某些情况下，您可以通过一些JS使其更易用...

如果您想要一个仅使用CSS且没有悬停的下拉菜单，这里有另一种解决方案，使用复选框实现：（只需在Google上搜索“css复选框hack”以获取更多信息）

.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>

只需添加一些类似于选择框的样式，就可以使其在移动设备上友好了...;-) - ToTaTaRi
或者你可以使用锚链接和 :target 选择器来管理切换！ - ToTaTaRi
是的，你说得对。我想有一些误解，我想说的是，在移动设备上，悬停互动不存在，因为没有像台式机上那样静止不动的鼠标光标。现在，一些移动设备上的浏览器会自动将悬停翻译为“触摸”或“被触摸”，确实可以工作，但在这种情况下，为什么不直接使用touchstart或click事件呢？另外，我在我的问题中给出了一个例子，说明我希望它的感觉和行为如何，并且我不认为<select>在桌面上会在悬停时打开。 - Walle Cyril
但是我的复选框解决方案与选择框完全相同吗？它不会在悬停时打开，而是在单击时... - ToTaTaRi
1

我用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

1
由于 OP 标记了可访问性，我假设他们关心使用键盘导航的用户。您的示例需要进行相当多的工作才能实现键盘可访问性（能够使用键盘聚焦和导航选项）。 - steveax
不像我想要的<select>那样工作。此外在移动端不存在:hover。 - Walle Cyril
0

不使用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;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接