调整为较小的屏幕尺寸时，为什么我的下拉列表会自动打开？

Question

For a mobile view, this is the expected outcome

由于某种原因，当我调整窗口大小时，所有下拉菜单项都被打开。我也希望它看起来像发布图像，并且单击标题时，菜单会在小屏幕上打开下拉菜单。在此处链接到我的代码：https://jsfiddle.net/ept307gm/

<div id="menuContainer" class="clearfix">
    <nav id="siteMenu">
        <h2 class="mobileTitle">&nbsp;<img style="float: right;" src=""></h2>
        <ul class="dropDownMenu">
            <li id="dropDownRootItem1">
                <a class="dropDownRootItem1">Information</a>
                <div class="menuContainer widthcontainer2col">
                    <div class="innerContainer">
                        <ul class="menuColumn">
                            <ul class="menuLevel1">
                                <li class="menuLevel2"><a href="">My Account</a></li>

Answer 1

首先，您需要在较小的设备的媒体查询中隐藏子菜单

#siteMenu, .menuColumn {
  display: none;
}

随后，您可以使用一些基本的JavaScript来切换菜单项click上的子菜单。

下面是有效的代码段：

var listItems = document.querySelectorAll('.dropDownMenu > li');
for (let listItem of listItems) {
  listItem.onclick = e => {
    var subMenu = e.target.querySelector('.menuColumn');
    if (window.getComputedStyle(subMenu).display === 'none') {
      subMenu.style.display = 'block';
    } else {
      subMenu.style.display = 'none';
    }
  }
}

div,
a,
img,
nav {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

nav {
  display: block;
}

h2 {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: bold;
  color: #323232;
}

a,
a:visited {
  color: #4f2683;
  text-decoration: none;
}

a:active,
a:hover {
  text-decoration: underline;
}

ul {
  margin-bottom: 20px;
  margin-top: -5px;
}

ul ul {
  margin: 0;
}

a {
  font-weight: 700;
}

@media handheld,
screen and (min-width: 620px) {
  #menuContainer ul {
    list-style: none;
  }
  #menuContainer {
    float: left;
    max-width: 821px;
    width: 100%;
    margin: 0;
    padding-top: 20px;
    margin-bottom: -20px;
  }
  #siteMenu .mobileTitle {
    display: none;
  }
  #siteMenu {
    height: 60px;
    position: relative;
    list-style: none;
    font-size: 14px;
    z-index: 6000;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0 10px;
  }
  .dropDownMenu {
    position: relative;
    z-index: 999;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .dropDownMenu>li>a {
    display: block;
    overflow: hidden;
    position: relative;
    text-indent: 0;
    color: #000;
    text-align: center;
    text-decoration: none;
    background: 0;
    border: 0 none;
    height: auto;
    padding: 15px 0;
    font-weight: 400;
  }
  .dropDownMenu ul {
    list-style-type: none;
    float: left;
    position: relative;
    z-index: 9999;
    margin: 0;
    padding: 0;
  }
  ul.menuColumn {
    border-left: none;
    border-right: none;
  }
  ul.menuColumn:first-child {
    border: 0;
  }
  .widthcontainer2col ul.menuColumn {
    width: 45%;
    padding: 0 10px;
  }
  .dropDownMenu ul.menuColumn a {
    text-decoration: none;
    display: block;
    letter-spacing: 1px;
    color: #363636;
    font-size: 13px;
    line-height: 115%;
    margin: 6px 0;
  }
  .dropDownMenu li.menuLevel1 {
    font-weight: 700;
    letter-spacing: 0;
    font-size: 12px;
    line-height: 16px;
    color: #4f2683;
    margin: 5px 0;
  }
  .dropDownMenu li.menuLevel2>a {
    font-weight: 400;
  }
  .dropDownMenu ul a:hover {
    text-decoration: underline;
  }
  .dropDownMenu ul.menuLevel1 {
    float: none;
  }
  .dropDownMenu .menuContainer {
    position: absolute;
    display: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid #4f2683;
    background: #fff;
    z-index: 9999;
    top: 47px;
    padding: 0;
  }
  .dropDownMenu .innerContainer {
    float: left;
    width: 100%;
    position: relative;
    z-index: 99;
  }
  .dropDownMenu .widthcontainer2col {
    width: 50%;
  }
  ul.dropDownMenu li:hover .menuContainer {
    display: block!important;
  }
  ul.dropDownMenu li {
    float: left;
    cursor: pointer;
  }
  ul.dropDownMenu li li {
    float: none;
  }
  .widthcontainer2col {
    top: 30px;
    z-index: 999;
  }
  /* .widthcontainer2col .innerContainer:before {
            position: absolute;
            content: "";
            z-index: -1;
            width: 53%;
            top: 12px;
            bottom: 14px;
            right: 0;
            border-left: 1px solid #b9b9b9;
            } */
  /* .dropDownMenu>li:hover>a {
            position: relative;
            text-decoration: none;
            font-weight: 700;
            background: #4f2683;
            color: #fff;
            } */
  #dropDownRootItem2 {
    width: 19.970631424376%;
    max-width: 136px;
  }
  #dropDownRootItem2:hover>a {
    background-position: center -21px;
  }
  #dropDownRootItem3:hover>a {
    background-position: center -63px;
  }
  #dropDownRootItem4 {
    width: 15.418502202643%;
    max-width: 105px;
  }
  #dropDownRootItem4:hover>a {
    background-position: center -105px;
  }
  #dropDownRootItem5 {
    width: 16.446402349486%;
    max-width: 90px;
  }
  #dropDownRootItem5:hover>a {
    background-position: center -147px;
  }
  #dropDownRootItem7 .widthcontainer2col {
    right: 0;
  }
  #dropDownRootItem1,
  #dropDownRootItem3 {
    width: 17.033773861968%;
    max-width: 116px;
  }
  #dropDownRootItem6,
  #dropDownRootItem7 {
    width: 16.096916299559%;
    max-width: 124px;
  }
  #dropDownRootItem7 {
    width: 16.096916299559%;
    max-width: 124px;
  }
  #dropDownRootItem6:hover>a,
  #dropDownRootItem7:hover>a {
    background-position: center -189px;
  }
  #dropDownRootItem5,
  #dropDownRootItem6,
  #dropDownRootItem7 {
    position: relative;
  }
  #dropDownRootItem5 .widthcontainer2col,
  #dropDownRootItem6 .widthcontainer2col,
  #dropDownRootItem7 .widthcontainer2col {
    width: 440px;
  }
  .widthcontainer2col .innerContainer:before {
    position: relative;
    border-left: none;
  }
  .innerContainer>.menuColumn:nth-child(1) {
    width: 100%;
    box-sizing: border-box;
  }
  .dropDownMenu .widthcontainer2col {
    width: auto;
  }
  #dropDownRootItem5 .widthcontainer2col,
  #dropDownRootItem6 .widthcontainer2col,
  #dropDownRootItem7 .widthcontainer2col {
    width: 250px;
  }
  .dropDownMenu .menuLevel2 {
    padding: 3px 0;
  }
  .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  .clearfix {
    display: inline-block;
  }
}

@media screen and (max-width: 840px) {
  #dropDownRootItem1 {
    width: 17%;
  }
  #dropDownRootItem2 {
    width: 16%;
  }
  #dropDownRootItem3 {
    width: 14%;
  }
  #dropDownRootItem4 {
    width: 13%;
  }
  #dropDownRootItem5 {
    width: 12%;
  }
  #dropDownRootItem6 {
    width: 10%;
  }
  #dropDownRootItem7 {
    width: 10%;
  }
}

@media screen and (max-width: 740px) {
  #dropDownRootItem1,
  #dropDownRootItem2,
  #dropDownRootItem3,
  #dropDownRootItem4,
  #dropDownRootItem5,
  #dropDownRootItem6,
  #dropDownRootItem7 {
    font-size: 12px;
  }
}

@media handheld,
screen and (max-width: 619px) {
  #siteMenu,
  .menuColumn {
    display: none;
  }
  #siteMenu {
    display: block;
  }
  #siteMenu .mobileTitle {
    display: block;
    padding: 15px;
    padding-left: 30px;
    background-color: #4f2683;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer;
  }
  #siteMenu>ul {
    list-style-type: none;
    width: 89.5%;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: all .5s ease;
  }
  #siteMenu>ul ul {
    padding: 0;
    list-style: none;
  }
  #siteMenu a,
  #siteMenu li {
    margin: 0;
    padding: 15px 10px;
    color: #fff;
  }
  #siteMenu .dropDownMenu>li {
    width: 100%!important;
    box-sizing: border-box;
    padding: 5px 0;
    cursor: pointer;
  }
  .dropDownMenu>li>a {
    font-size: 24px;
    background-color: #4f2683;
    display: block;
    margin: 10px;
    pointer-events: none;
  }
  .dropDownMenu>li>.menuContainer {
    font-size: 16px;
    width: 100%;
    height: 100%;
  }
  .dropDownMenu>li>.menuContainer>.innerContainer {
    opacity: .75;
  }
  #siteMenu .menuColumn>li {
    padding: 0;
    background-color: #fff;
    color: #4f2683;
  }
  #siteMenu .menuColumn li a {
    color: #4f2683;
  }
  #siteMenu li.menuLevel2 {
    padding-left: 0;
  }
  #siteMenu .menuColumn>li>ul {
    padding: 0;
  }
  #siteMenu .menuColumn>li>ul>li {
    padding-left: 0;
    margin: 2px;
  }
  #siteMenu .menuLevel2 {
    padding: 15px;
  }
}

@media print {
  #siteMenu {
    display: none;
  }
  h2 {
    color: #000;
    font-size: 25px;
  }
  img {
    border: none;
  }
}

<div id="menuContainer" class="clearfix">
  <nav id="siteMenu">
    <h2 class="mobileTitle">&nbsp;<img style="float: right;" src=""></h2>
    <ul class="dropDownMenu">
      <li id="dropDownRootItem1">
        <a class="dropDownRootItem1">Information</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <ul class="menuLevel1">
                <li class="menuLevel2"><a href="">My Account</a></li>
                <li class="menuLevel2"><a href="/get-a-library-card">//</a></li>
                <li class="menuLevel2"><a href="/using-the-library">//</a></li>
                <li class="menuLevel2"><a href="/events-scheduling-and-room-rentals">//</a></li>
                <li class="menuLevel2"><a href="/employment-volunteering">//</a></li>
                <li class="menuLevel2"><a href="/library-book-sale">//</a></li>
                <li class="menuLevel2"><a href="/about-the-library">About</a></li>
                <li class="menuLevel2"><a href="/blog">Blog</a></li>
                <li class="menuLevel2"><a href="/contact-us">Contact Us</a></li>
              </ul>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem2">
        <a class="dropDownRootItem1">Kids' Corner</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <!-- Kids' Corner is currently under construction -->
                  <!-- <li class='menuLevel2'><a href='/kids-corner-home'>Kids' Corner</a></li> -->
                  <li class="menuLevel2"><a href="/kids-programs">Kids' Programs</a></li>
                  <li class="menuLevel2"><a href="/story-times">Story Times</a></li>
                  <li class="menuLevel2"><a href="/kids-program-registration">Program Registration</a></li>
                  <li class="menuLevel2"><a href="/kids-annual-programs">Kids’ Annual Programs</a></li>
                  <li class="menuLevel2"><a href="/books-for-kids">Books and Kits for Kids</a></li>
                  <li class="menuLevel2"><a href="/homework">Online Resources</a></li>
                  <li class="menuLevel2"><a href="/kids-calendar">Kids’ Calendar</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem3">
        <a class="dropDownRootItem1">Teen Scene</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <li class="menuLevel2"><a href="/teen-programs">Teen Programs</a></li>
                  <li class="menuLevel2"><a href="/teen-homework-resources">Teen Homework Resources</a></li>
                  <li class="menuLevel2"><a href="/teen-booklists">Teen Booklists</a></li>
                  <li class="menuLevel2"><a href="/magazine-list?collection=Teen">Teen Magazines</a></li>
                  <li class="menuLevel2"><a href="/teen-newsletter">Teen Newsletter</a></li>
                  <li class="menuLevel2"><a href="/teen-calendar">Teen Calendar</a></li>
                  <li class="menuLevel2"><a href="/contact-teen-librarian">Contact a Teen Librarian</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem4">
        <a class="dropDownRootItem1">Programs</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <li class="menuLevel2"><a href="/calendars">Calendar </a></li>
                  <li class="menuLevel2"><a href="/all-ages-programs">All Ages Programs</a></li>
                  <li class="menuLevel2"><a href="/adult-programs">Adult Programs</a></li>
                  <li class="menuLevel2"><a href="/teen-programs">Teen Programs</a></li>
                  <li class="menuLevel2"><a href="/kids-programs">Kids’ Programs</a></li>
                  <li class="menuLevel2"><a href="/annual-programs">Annual Programs</a></li>
                  <li class="menuLevel2"><a href="/art-galleries">Exhibits </a></li>
                  <li class="menuLevel2"><a href="/on-demand">On Demand Programs</a></li>
                  <li class="menuLevel2"><a href="/other-programs">Other Programs</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem5">
        <a class="dropDownRootItem1">Learn</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <li class="menuLevel2"><a href="/a-z-resources-list/1897-azresourcelist">Research Databases</a></li>
                  <li class="menuLevel2"><a href="/homework-resource">Homework Resources</a></li>
                  <li class="menuLevel2"><a href="/educational-services ">Educational Services</a></li>


                  <li class="menuLevel2"><a href="/computers-and-internet-access">Computers, Internet &amp; Printing</a></li>
                  <li class="menuLevel2"><a href="/private-study-rooms">Private Study Rooms</a></li>
                  <li class="menuLevel2"><a href="/media-center">Media Center</a></li>
                  <li class="menuLevel2"><a href="/basement-creative-lab">Basement Creative Lab</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem6">
        <a class="dropDownRootItem1">Books &amp; Media</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <li class="menuLevel2"><a href="/book-club-sets">Book Club Sets</a></li>
                  <li class="menuLevel2"><a href="/booklists">Booklists</a></li>
                  <li class="menuLevel2"><a href="/book-blogs">Library Book Blogs</a></li>
                  <li class="menuLevel2"><a href="/book-series">Book Series Order</a></li>
                  <li class="menuLevel2"><a href="/find-a-book">Reading Suggestions</a></li>
                  <li class="menuLevel2"><a href="/magazines-newspapers">Magazines &amp; Newspapers</a></li>
                  <li class="menuLevel2"><a href="/new-audio-visual">New Audio/Visual Materials</a></li>
                  <li class="menuLevel2"><a href="/requesting-books">Requesting Books</a></li>
                  <li class="menuLevel2"><a href="/digital-downloads">Digital Collections</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li id="dropDownRootItem7">
        <a class="dropDownRootItem1">Español</a>
        <div class="menuContainer widthcontainer2col">
          <div class="innerContainer">
            <ul class="menuColumn">
              <li class="menuLevel1">
                <ul class="menuLevel1">
                  <li class="menuLevel2"><a href="/paginas">Páginas en Español</a></li>
                  <li class="menuLevel2"><a href="/usando-la-biblioteca">Usando la Biblioteca</a></li>
                  <li class="menuLevel2"><a href="/servicios">Servicios </a></li>
                  <li class="menuLevel2"><a href="/eventos">Eventos</a></li>
                  <li class="menuLevel2"><a href="/recursos">Recursos</a></li>
                  <li class="menuLevel2"><a href="/departamento-de-ninos">Departamento de Niños</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</div>