JS隐藏下拉菜单被隐藏了吗？还是不工作？

时间：2017-11-23 02:06:55

标签： javascript jquery html css

在彻底尝试解决此问题后 - 我需要一些帮助。

我正在尝试建立一个网站，其中包含一个用于网站的导航栏（由bootstrap制作），我正在为较小的屏幕制作一个小的下拉菜单（我还没有添加此功能，我只是想要它先工作）。我还没那么风格。

问题是我知道我的按钮并且代码正常工作（因为我有codepen显示它有效），但在我的网站中，我看不到下拉列表菜单。不知道它是隐藏的还是什么，但我无法解决这个问题。

这是HTML（因为我必须放点东西......）：

<div class = "dropdown">
    <button onclick = "menuBtn ()" class = "dropBtn">Menu</button>
    <div id = "dropCollapse" class = "dropdownContent">
        <a class = "contentLinks" href = "#about">About</a>
        <a class = "contentLinks" href = "#team">Team</a>
        <a class = "contentLinks" href = "#photos">Photos</a>
        <a class = "contentLinks" href = "#shirts">T-Shirts</a>
        <a class = "contentLinks" href = "#contact">Contact</a>
    </div>
</div>

我玩过z-index（在很多地方，但如果你有建议，请随意制作，我会试试）。我从导航栏中取出了菜单（认为它与此有关）。但大多数情况下我只是感到困惑 - 没有其他真正回答我关于这个菜单问题的问题。我觉得我有一些小东西可以忽略，而我却无法弄明白。

这是一个小提示，显示我的网站的基本轮廓，菜单不起作用：https://jsfiddle.net/nekochan/eh69segg/1/

2 个答案:

答案 0 :(得分：0)

您的HTML中存在多个错误，例如<a class="navBrand" href="#masthead">没有关闭且您的menuBtn未被调用，我建议您完全使用jquery如果项目中包含它，请参阅这里你的代码工作

＆＃13;
＆＃13; 
//mobile menu button collapse
function menuBtn() {
  document.getElementById("dropCollapse").classList.toggle("show");
}
/* global $ */
$(document).ready(function() {
  $("#my-button").click(function() {
    document.getElementById("dropCollapse").classList.toggle("show");
  })
  //makes the masethead fit the whole screen
  $("#masthead").css("min-height", $(window).height());



  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropBtn')) {

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

});
＆＃13; 
.main {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.body {
  position: relative;
}

#navBar {
  margin-bottom: 0;
  background-color: black;
  font-family: 'Permanent Marker', cursive;
}

.brandImage {
  height: 60px;
  width: auto;
}

#navHeader {}

#navItem {}

#navLink {
  text-decoration: none;
}

.dropBtn {
  background-color: #4caf50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropBtn:hover,
.dropBtn:focus {
  background-color: #3e8e41;
}

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

.dropdownContent {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

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

.contentLinks:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}

@media (max-width: 960px) {
  #large-menu {
    display: none;
  }
  .brandImage {
    float: left;
  }
}

#masthead {
  background-color: #65737e;
  background-image: url(https://static.pexels.com/photos/285286/pexels-photo-285286.jpeg);
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: bottom center;
  display: flex;
  align-items: center;
  min-height: 100%;
  min-height: 100vh;
}

.headerText {
  font-size: 90px;
  font-family: 'Permanent Marker', cursive;
  color: #fff;
}

.headerTagline {
  font-size: 60px;
  font-family: 'Permanent Marker', cursive;
  color: #fff;
}

.anchor {
  display: block;
  height: 50px;
  margin-top: -50px;
  visibility: hidden;
}

.sectionHeader {
  font-family: 'Permanent Marker', cursive;
  padding: 20px 20px 20px 20px;
}

.sectionText {
  padding: 20px 20px 20px 20px;
}

#aboutBox {
  background-color: #c0c5ce;
  padding: 20px 0 20px;
}

#teamBox {
  background-color: #a7adba;
  padding: 20px 0 20px;
}

#workBox {
  background-color: #65737e;
  padding: 20px 0 20px;
}

#shirtBox {
  background-color: #4f5b66;
  padding: 20px 0 20px;
}

#socialBox {
  background-color: #343d46;
  padding: 20px 0 20px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <nav class="navbar navbar-inverse navbar-fixed-top" id="navBar">
    <div class="container-fluid">
      <div class="navHeader navbar-left">
        <a class="navBrand" href="#masthead"></a>

        <ul class="nav navbar-nav navbar-right" id="large-menu">
          <li class="navItem">
            <a class="navLink" href="#about">About</a>
          </li>
          <li class="navItem">
            <a class="navLink" href="#team">Team</a>
          </li>
          <li class="navItem">
            <a class="navLink" href="#photos">Photos</a>
          </li>
          <li class="navItem">
            <a class="navItem" href="#shirts">T-Shirts</a>
          </li>
          <li class="navItem">
            <a class="navLink" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <div class="dropdown">
        <button class="dropBtn" id="my-button">Menu</button>
        <div id="dropCollapse" class="dropdownContent">
          <a class="contentLinks" href="#about">About</a>
          <a class="contentLinks" href="#team">Team</a>
          <a class="contentLinks" href="#photos">Photos</a>
          <a class="contentLinks" href="#shirts">T-Shirts</a>
          <a class="contentLinks" href="#contact">Contact</a>
        </div>
      </div>
  </nav>

  <div class="container text-center" id="masthead">
    <div class="col-sm-12">
      <h1 class="headerText"></h1>
      <p class="headerTagline"></p>
    </div>
  </div>

  <span class="anchor" id="about"></span>
  <div class="container-fluid" id="aboutBox">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="sectionHeader">About Us</h2>
        <p class="sectionText">We're all about that chedda</p>
      </div>
    </div>
  </div>

  <span class="anchor" id="team"></span>
  <div class="container-fluid" id="teamBox">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="sectionHeader">Meet the team</h2>
        <p class="sectionText">pictures of team go here</p>
      </div>
    </div>
  </div>

  <span class="anchor" id="photos"></span>
  <div class="container-fluid" id="workBox">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="sectionHeader">Our Work</h2>
        <p class="sectionText">pictures go here</p>
      </div>
    </div>
  </div>

  <span class="anchor" id="shirts"></span>
  <div class="container-fluid" id="shirtBox">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="sectionHeader">T-shirts Preview</h2>
        <p class="sectionText">pictures of tshirts go here</p>
      </div>
    </div>
  </div>

  <span class="anchor" id="contact"></span>
  <div class="container-fluid" id="socialBox">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="sectionHeader">Contact Us</h2>
        <p class="sectionText">links to social media and contact us form</p>
      </div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我注意到的一些事情：

  • 您使用的是jQuery，但未定义要加载的jQuery。如果你做了一个＆＃34;检查元素＆＃34;你会看到$未定义
  • 你也有一些丢失的div，而且一个锚没有关闭
  • 如果您打算采用这种方式，我建议您只使用纯粹的jQuery - 这是一个非常简单的示例。这是你更新的小提琴 - 注意切换动画很好：）

https://jsfiddle.net/qdL9mch2/1/ 

/* global $ */
$(document).ready(function() {

  //makes the masethead fit the whole screen
  $("#masthead").css("min-height", $(window).height());

  //mobile menu button collapse
 $(".dropBtn").on("click", function(){
    $("#dropCollapse").toggle("show");
});

  // Close the dropdown menu if the user clicks outside of it
  //update to jquery
  window.onclick = function(event) {
    if (!event.target.matches('.dropBtn')) {

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

});
相关问题
最新问题