Question

我正在网站上工作并试图制作带有汉堡菜单的移动版本。这个想法是，当点击汉堡时会出现一个下拉菜单。所以我试图做的就是这个

HTML：

    <nav class="mobile">
        <ul>
            <li id="burgericon"><img src="./images/Icons/burgericon.png" alt="icon" onclick="changeDisplay()"></li>
            <li id="mobilecart"><a href="#cart"><img src="./images/Icons/icon_cart.png" alt="cart"></a></li>
                <ul>
                    <li id="dropdown"><a href="#">Store</a></li>
                    <li id="dropdown"><a href="#">About</a></li>
                    <li id="dropdown"><a href="#">Contact</a></li>
                </ul>
        </ul>
    </nav>

CSS：

#burgericon img {
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
    float: left;
    width: 50px;
    height: 50px;
}

#mobilecart img {
    padding-top: 20px;
    padding-right: 20px;
    height: 33px;
    width: 38px;
    float: right;
}

#dropdown {
    display: none;
    text-decoration: none;
    color: black;
    background-color: black;
}

和JS：

function changeDisplay() {
    alert("eys");
    document.getElementbyId("dropdown").style.display = "block";
    }

警报有效，但由于某种原因，它不会将该ID的显示更改为阻止而不是无。有任何想法吗？我暂时不能使用jQuery。

Answer 1

请注意此行中的区分大小写： document.getElementById（注意首都B）。

html

 <ul id="ul">
        <li ><a href="#">Store</a></li>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Contact</a></li>
 </ul>

js

 document.getElementById("ul").style.display = "block";

Answer 2

您只能拥有一次ID。将ID移动到<ul>元素中。此外，它是getElementById，大写B。

＆＃13;

function changeDisplay() {
    document.getElementById("dropdown").style.display = "block";
}

＆＃13;

#burgericon img {
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
    float: left;
    width: 50px;
    height: 50px;
}

#mobilecart img {
    padding-top: 20px;
    padding-right: 20px;
    height: 33px;
    width: 38px;
    float: right;
}

#dropdown {
    display: none;
    text-decoration: none;
    color: black;
    background-color: black;
}

＆＃13;

<nav class="mobile">
        <ul>
            <li id="burgericon"><a onclick="changeDisplay()">Burger</a></li>
            <li id="mobilecart"><a href="#cart">Cart</a></li>
                <ul  id="dropdown">
                    <li><a href="#">Store</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </ul>
    </nav>

＆＃13;

Answer 3

我要给出的第一个建议是永远不要对元素使用相同的ID 并试用这段代码。

docker run -p 49160:8080 -d <your username>/node-web-app:test1

Answer 4

我将方法更改为下拉列表的工作方式以显示其他方式。不使用JavaScript只影响一种样式（即display），而是使用多个类来控制多种样式。

classList用于在2个状态之间切换 .on和.off
- .on等级决定了下拉列表的高度和不透明度随着它的增长和淡入而变化。
- .off等级决定了下拉列表的高度和不透明度，因为它会缩小并淡出。
最初，<li>每个都有#dropdown个ID，这是错误的， ID必须始终是唯一的，没有例外。所以每个人现在都有一个班级（.dropdown）。
- 改为将#dropdown重新分配给<ul>。最好是定位父元素而不是每个元素。

注意：通常情况下，预计下拉菜单会以某种方式消失，因此此代码确实会发生这种情况。此函数也是可重用的，并且可以传递任何简单的CSS选择器。

特征

toggleState(target)

用法

target：引用元素的字符串。语法与CSS选择器和jQuery对象完全相同。

<ul id="idOfUL"> = "#idOfUL"

<li class="classOfLI"> = ".classOfLI"

<a href="home.html"> = "a"

段

＆＃13;

function toggleState(target) {
  var tgt = document.querySelector(target);
  if (tgt.classList.contains('off')) {
    tgt.classList.add('on');
    tgt.classList.remove('off');
  } else {
    tgt.classList.remove('on');
    tgt.classList.add('off');

  }
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a,
a:link,
a:visited {
  color: gold;
  text-decoration: none;
}
a:hover,
a:active {
  color: cyan;
}
img {
  cursor: pointer;
}
#burgericon img {
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 5px;
  float: left;
  width: 50px;
  height: 50px;
}
#mobilecart img {
  padding-top: 20px;
  padding-right: 20px;
  height: 33px;
  width: 38px;
  float: right;
  list-style: none;
}
#dropdown {
  text-decoration: none;
  color: white;
  background-color: black;
  float: left;
  margin: 50px 0 0 0;
  padding: 10px 5px;
  position: relative;
  right: 50px;
  cursor: pointer;
  border-radius: 4px;
}
.dropdown {
  height: 30px;
}
.off {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 1s ease-out, opacity 1.5s linear .5s;
}
.on {
  max-height: 1500px;
  opacity: 1;
  transition: max-height 1.25s ease-in, opacity 2s linear;
}

＆＃13;

<nav class="mobile">
  <ul>
    <li id="burgericon">
      <img src="https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-128.png" alt="icon" onclick="toggleState('#dropdown')">
    </li>
    <li id="mobilecart">
      <a href="#cart">
        <img src="http://www.iconsfind.com/wp-content/uploads/2013/11/20131104_527707eb9746b.png" alt="cart">
      </a>
    </li>
    <ul id='dropdown' class='off'>
      <li class="dropdown"><a href="#">Store</a>
      </li>
      <li class="dropdown"><a href="#">About</a>
      </li>
      <li class="dropdown"><a href="#">Contact</a>
      </li>
    </ul>
  </ul>
</nav>

＆＃13;

如何通过单击更改项目的显示属性

4 个答案:

特征

用法

段