Question

林设立的onclick下拉导航栏，我的网站的移动部件，遇到的问题IM是当它需要双击才能让它降下来了。我想要的结果是它在单击时会下降。

到目前为止，我唯一尝试过的就是将在代码中显示的Javascript函数。

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    }

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}

.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}

<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

我希望输出是一个下拉菜单，该菜单在第一次单击时会响应。但输出即时得到是一个下拉菜单上点击一下，这是错误的，我想要的响应。

预先感谢祝福那些谁帮助

Answer 1

第一次点击时未显示的原因是这种情况

if (x.style.display === "none")

由于您在CSS样式表中设置了display: none;，所以

为假。因此，解决此问题的一种快速方法是内联添加display: none;：

<ul id="submenu1" style="display:none;">

但是更干净的方法是使用类来控制菜单的可见性。请参见下面的代码段。

function myFunction() {
  var x = document.getElementById("submenu1");
  x.classList.toggle('hidden');
}

.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu1.hidden {
  display: none;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}

<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1" class="hidden">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

Answer 2

好的，所以这里的问题是x.style.display返回空字符串，因为该属性是在样式表中定义的。

第一个解决方案是使用内联CSS

2nd再次对空白字符串进行这样的检查。

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    }

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none" || y.style.display === "") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}

.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}

<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

有关该问题的更多信息，位于：Fixing the Mobile Double-Click Link Issue

固定移动双击链接问题

2 个答案: