javascript - 我正在尝试使用javascript在li内的元素进行下拉菜单

Question

首先我要说我有 0 个 js 知识我正试图从 W3 拼凑起来

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

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

.show {display:block;}

                                <li class="dropbtn"> 
                                 <a onclick="myFunction()"  href="#"> <i class="fa fa-user"></i> John Smith <b <i class="fa fa-caret-down"></b></a>
                                  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
                                </li>

                                
                                <div id="myDropdown" class="dropdown-content">  
                                <li>
                                <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                                </li>
                                    
                                
                                    
                                <li>
                                <a href="./backend/logout.backend.php"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                                </li>
                                    </div>

正如你所看到的，当我点击 JohnSmith 时没有任何反应，但是当我点击按钮时它工作得很好

我希望约翰史密斯也能工作

标签： javascripthtmlcss

Answer 1

您也可以将您的课程添加到链接中。

所以它会是：

<a onclick="myFunction()"  class="dropbtn" href="#"> <i class="fa fa-user"></i> John Smith <b <i class="fa fa-caret-down"></b></a>