javascript - 隐藏的子菜单出现在点击javascript

Question

我正在使我的网站响应。我希望子菜单在我单击一个菜单选项时出现，并在我再次单击时消失。

JS 不工作。

$(function () {
  $('.menu_option').click(function () {
    $('.submenu_wrapper').slideToggle();
  });
});

#menu {
  margin-bottom: 20px;
  background-color: #73818c;
  padding: 10px;
}

.menu_option {
  float: left;
  min-width: 150px;
  text-align: center;
  border-right: dotted 2px black;
  padding: 10px;
  font-size: 16px;
  position: relative;
}

.submenu {
  text-align: center;
  border-bottom: dotted 2px black;
  padding-top: 10px;
  padding-bottom: 10px;
  display: none;
  font-size: 13px;
}

.submenu_wrapper {
  position: absolute;
  background-color: lightgray;
  left: 0;
  right: 0;
  z-index: 2;
}

.submenu:hover {
  background-color: white;
}

.menu_option:hover div {
  display: block;
}

.menu_option:hover {
  background-color: lightgray;
  cursor: pointer;
}

@media (max-width: 768px) {
  #menu {
    width: auto;
    margin: 0px;
    height: auto;
  }

  .menu_option {
    width: auto;
    height: auto;
    padding: 0px;
    border-right: hidden;
    float: none;
  }

  .menu_option:hover {
    background-color: #73818c;
    cursor: auto;
  }

  .menu_option:hover div {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="menu">
  <a href="index.html" title="Strona główna"><div class="menu_option">Strona główna</div></a>
  <a href="gallery.html"><div class="menu_option">Galeria</div></a>
  <div class="menu_option">Reżyserzy
    <div class="submenu_wrapper">
      <a href="tarantino.html"><div class="submenu" style="margin-top:10px">Quentin Tarantino</div></a>
      <a href="coen.html"><div class="submenu">Bracia Coen</div></a>
      <a href="anderson.html"><div class="submenu">Wes Anderson</div></a>
    </div>
  </div>
  <a href="favourites.html"><div class="menu_option">Ulubione filmy</div></a>
  <a href="tvseries.html"><div class="menu_option">Seriale</div></a>
  <a href="contact.html"><div class="menu_option">Kontakt</div></a>  
  <div style="clear:both"></div>
</div>

Answer 1

改用 .on() 方法。如下所示:

$(function () {
    $('.menu_option').on('click', function () {
        $('.submenu_wrapper').slideToggle();
    });
});