下拉列表不起作用

时间:2018-05-25 05:54:02

标签: javascript html css

我有一个导航栏,其中一个按钮将是一个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:

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');
  }
}

} }

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>

1 个答案:

答案 0 :(得分:0)

您与函数有很多命名差异,现在它按预期工作:

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>