javascript - 下拉菜单不起作用

Question

我有一个导航栏，其中一个按钮将是一个 onclick 下拉菜单。我已经为她做了一个，但首先，CSS 不起作用。第二，然后JS不能工作。

那你们可以看看吗？我尝试重读 3 次，并在拼写错误一个小时后检查。

HTML：

<div class="functionMobileDropDownDropDown">
      <button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
        Dropdown
      </button>
        <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
    </div>

CSS：

    .functionMobileDropDownDropBtn {
       background-color: #3498DB;
       color: white;
       padding: 16px;
       font-size: 16px;
       border: none;
       cursor: pointer;
   }

   .functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
       background-color: #2980B9;
   }

   .functionMobileDropDownDropDown {
       position: relative;
       display: inline-block;
   }

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

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

   .functionMobileDropDownDropDown a:hover {
     background-color: #ddd
   }

   .MobileDropDownShow   {
     display:block;
   }

JS：

函数 functionMobileDropDown() { document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow"); }

window.onclick = function(event) { if (!event.target.matches('.functionMobileDropDownDropBtn')) {

var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('functionMobileDropDownShow')) {
    openDropdown.classList.remove('functionMobileDropDownShow');
  }
}

} }

function functionMobileDropDown() {
      document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow");
    }


    window.onclick = function(event) {
      if (!event.target.matches('.functionMobileDropDownDropBtn')) {

        var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('functionMobileDropDownShow')) {
            openDropdown.classList.remove('functionMobileDropDownShow');
          }
        }
      }
    }

.functionMobileDropDownDropBtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }

  .functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
      background-color: #2980B9;
  }

  .functionMobileDropDownDropDown {
      position: relative;
      display: inline-block;
  }

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

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

  .functionMobileDropDownDropDown a:hover {
  	background-color: #ddd
  }

  .MobileDropDownShow	 {
  	display:block;
  }

<div class="functionMobileDropDownDropDown">
          <button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
            Dropdown
          </button>
            <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
              <a href="#home">Home</a>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
            </div>
        </div>

标签： javascripthtmlcss

Answer 1

您与classes和functions有很多命名差异，现在它按预期工作：

function functionMobileDropDown() {
  document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow");
}

window.onclick = function(event) {
  if (!event.target.matches('.functionMobileDropDownDropBtn')) {
    var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('functionMobileDropDownShow')) {
        openDropdown.classList.remove('functionMobileDropDownShow');
      }
    }
  }
}

.functionMobileDropDownDropBtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.functionMobileDropDownDropBtn:hover,
.functionMobileDropDownDropBtn:focus {
  background-color: #2980B9;
}

.functionMobileDropDownDropDown {
  position: relative;
  display: inline-block;
}

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

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

.functionMobileDropDownDropDown a:hover {
  background-color: #ddd
}

.functionMobileDropDownShow	{
  display: block;
}

<div class="functionMobileDropDownDropDown">
  <button onclick="functionMobileDropDown()" class="functionMobileDropDownDropBtn">
    Dropdown
  </button>
  <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>