时间戳

首页 > 解决方案 > 如何创建显示所选变量的可悬停下拉菜单

javascript - 如何创建显示所选变量的可悬停下拉菜单

问题描述

我正在寻找一些（可能很简单）的建议，我似乎无法在谷歌上找到这些建议。我有一个可悬停的下拉菜单，例如：

/* Dropdown Button */

.btn {
  background-color: #D6182D;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
  border: 10px;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .btn {
  background-color: rgb(134, 30, 42);
}
<center>
  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Chose a month to display</a>

    <div class="dropdown-content">
      <a class="nav-link" href="/jan">
        <font color="black">January 2018</font>
      </a>
      <a class="nav-link" href="/feb">
        <font color="black">February 2018</font>
      </a>
      <a class="nav-link" href="/mar">
        <font color="black">March 2018</font>
      </a>
      <a class="nav-link" href="/tot">
        <font color="black">Total</font>
      </a>
    </div>
  </div>
</center>

基本上取自w3schools..

现在，我想在有人点击后显示所选选项，而不是“选择要显示的月份”。你们对如何更改代码有任何想法吗？

期待你的回答:-)

标签： javascripthtmlcss

解决方案

我对您的 HTML 进行了一些更改以使其更具语义化，对于下拉文本，您可以尝试纯 JavaScript。我希望这能帮到您。

对于旧值，您可以将值存储在某个地方，例如本地存储

例如，我将旧的选定值保存在本地存储中。

const months = document.getElementsByClassName("dropdown-content");
if(localStorage.getItem("oldval")){
 document.getElementById("dropdownMenuLink").innerHTML = 
 localStorage.getItem("oldval"); 
}
Array.from(months).map(month=>{
 month.addEventListener("click",(e)=>{
 let selectedValue = e.target.textContent;
 document.getElementById("dropdownMenuLink").innerHTML = 
 selectedValue;
 localStorage.setItem("oldval",selectedValue);
});
});


const months = document.getElementsByClassName("dropdown-content");

Array.from(months).map(month=>{
  month.addEventListener("click",(e)=>{
    e.preventDefault();
    let selectedValue = e.target.textContent;
    document.getElementById("dropdownMenuLink").innerHTML = selectedValue;
  });
});
/* Dropdown Button */

.btn {
  background-color: #D6182D;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  min-width: 200px;
  display:inline-block;
  text-decoration:none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
  border: 10px;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style: none;
  padding:0;
  margin:0;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .btn {
  background-color: rgb(134, 30, 42);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <center>
  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Chose a month to display</a>

    <ul class="dropdown-content">
      <li><a class="nav-link" href="/jan">
        January 2018
        </a></li>
      <li><a class="nav-link" href="/feb">
        February 2018
        </a></li>
      <li><a class="nav-link" href="/mar">
        March 2018
        </a></li>
      <li><a class="nav-link" href="/tot">
        Total
        </a></li>
    </ul>
  </div>
</center>
</body>
</html>

推荐阅读