下拉菜单获取选定值 javascript

Question

正在尝试获取所选值：

getSelectedValue = () => {
        let selectedValue = document.getElementsByClassName('aa');
        selectedValue.style.fontWeight = 'bold';
        console.log(selectedValue);
      };

如何使用户在下拉菜单中选择的值（文本）加粗

当用户在菜单中导航时，我需要将他在菜单中选择的值设为粗体。

我该怎么做？

HTML 代码如下：

<div class="dropdown">
            <button onclick="showMenu()" class="dropbtn">Menu</button>
            <div id="menuDrop" class="dropdown-content">
              <a href="#">O QUE É A MICOSE DE UNHA?</a>
              <a href="#aspecto">QUAL O ASPECTO DE UMA MICOSE DE UNHA?</a>
              <a href="#possiveis">POSSÍVEIS CAUSAS DA MICOSE DE UNHA</a>
              <a href="#">OPÇÕES DE TRATAMENTO PARA MICOSE DE UNHA</a>
              <a href="#">FATOS RÁPIDOS SOBRE A MICOSE DE UNHA</a>
            </div>
          </div>

CSS 代码如下：

.dropdown {
  position: relative;
  margin-top: 35px;
  display: inline-block;
}

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

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

.dropdown a:hover {
  font-weight: bold;
}

.show {
  display: block;
}

下面的函数 showMenu (javascript):

showMenu = () => {
        document.getElementById('menuDrop').classList.toggle('show');
      };

      window.onclick = (event) => {
        if (!event.target.matches('.dropbtn')) {
          let dropdowns = document.getElementsByClassName('dropdown-content');
          for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }
          }
        }
      };

Answer 1

我注释掉了行 - openDropdown.classList.remove('show') 并添加了用于添加/删除 active class..

的脚本

$(document).ready(function() {
    $(".dropdown-content a").click(function() {
    $(".dropdown-content a").removeClass("active");
    $(this).addClass("active");
  });    
});

showMenu = () => {
        document.getElementById('menuDrop').classList.toggle('show');
      };

      window.onclick = (event) => {
        if (!event.target.matches('.dropbtn')) {
          let dropdowns = document.getElementsByClassName('dropdown-content');
          for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            /*if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }*/
          }
        }
      };

.dropdown {
  position: relative;
  margin-top: 35px;
  display: inline-block;
}

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

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

.dropdown a:hover {
  font-weight: bold;
}

/* add it */

.active {
  font-weight: bold;
}

/*********************/

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
            <button onclick="showMenu()" class="dropbtn">Menu</button>
            <div id="menuDrop" class="dropdown-content">
              <a href="#">O QUE É A MICOSE DE UNHA?</a>
              <a href="#aspecto">QUAL O ASPECTO DE UMA MICOSE DE UNHA?</a>
              <a href="#possiveis">POSSÍVEIS CAUSAS DA MICOSE DE UNHA</a>
              <a href="#">OPÇÕES DE TRATAMENTO PARA MICOSE DE UNHA</a>
              <a href="#">FATOS RÁPIDOS SOBRE A MICOSE DE UNHA</a>
            </div>
          </div>

下拉菜单获取选定值 javascript

dropdown menu get selected value javascript

html

javascript

css

selecteditem

drop-down-menu