尝试创建一个下拉菜单，但JavaScript不起作用

Question

这是点击时的效果：

这是期望的效果，我想让它可点击：

这是用:hover事件显示的，但我想要它可点击

Please help if anything possable as soon as you can to fix the Javascript coding

var content = document.getElementById("settingsBar");
var button = document.getElementById("show-more");

button.onclick = function() {
  if (content.className == "drop") {
    content.className = "";
  } else {
    content.className = "drop";
  }
};

#settingsBar {
  width: 100%;
  position: fixed;
  z-index: 1;
  background-color: #000;
  max-height: 56px;
  overflow: hidden;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
}
#settingsBar.drop {
  max-height: 1000px;
  color: #fff;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
}
#show-more i {
  padding-left: 48%;
  padding-top: 15px;
  color: #fff;
  -webkit-transition: color 0.7s;
  -moz-transition: color 0.7s;
  transition: color 0.7s;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="settingsBar">
  <a href="#" id="show-more"><i class="material-icons large">settings</i></a>
  <br/>
  <iframe src="http://www.pigigram.com/account_settings.php" scrolling="no" frameborder="0" width="100%"></iframe>
</div>

基本上我想要的是打开内容以显示iframe并允许他们使用设置。

- TheLiveitup34

---

你能否添加一个CodePen/Fiddle/Plunkr或其他演示你的问题的代码片段？ - sg.cc

我的问题是我无法打开元素，它可以被点击，但不想展开包含其中的iframe的div。 - TheLiveitup34

Answer 1

button.onclick = fucntion(); {

您拼错了单词“function”

- Andrew

---

即使我改变了拼写，它仍然不起作用。 - TheLiveitup34

@TheLiveitup34 - 你在使用Bootstrap吗？ - fmc

@Landslyde 不是，我正在使用自定义代码来完成我的整个网站，并且当您单击齿轮时，它应该添加.drop变量到id中并使其下拉和覆盖1000px，但它似乎无法与齿轮的<a>进行交互。 - TheLiveitup34