单击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();
    });
});

Answer 2

这是一个快速的解决方案：

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

body
{
    background-color:lightgray;
    font-family: 'Oswald', sans-serif;    
}

#container
{
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    margin-bottom:25px;
   
}

#header
{
    background-color:lightblue;
    height:100px; 
    margin-bottom:10px;  
}

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

#sidebar 
{
    float:left;
    width:182px;
    background-color:lightblue;
    background-color:#73818c;
    margin-top:20px;
    margin-bottom:50px;
}

#content 
{
    float:left;
    text-align:center;
    width:938px;
    background-color:lightblue;
    margin:20px;
    padding:20px;
}

#footer
{
    clear:both;
    text-align:center;
    text-transform:uppercase;
    background-color:red;
    padding:10px;
    letter-spacing:1px;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
    color:black;
}

.header_naglowek
{
    float:left;
    width:60%;
    text-align:right;
    color:#343434;
    letter-spacing:7px;
    font-weight:700;
    text-transform:uppercase;
    font-size:54px;
    padding-bottom:10px;
    padding-top:10px;
}

.reel
{
    animation-name: spin;
    animation-duration: 5s;
    animation-iteration-count:infinite;
    transform-origin:50% 50%;
}
@keyframes spin
{
      0% { transform: rotate(0deg); opacity:0.1; }
     10% { opacity:0.2; }
     20% { opacity:0.4; }
     30% { opacity:0.6; }
     40% { opacity:0.8; }
     50% { opacity:1.0; }
     60% { opacity:0.8; }
     70% { opacity:0.6; }
     80% { opacity:0.4; }
     90% { opacity:0.2; }
    100% { transform: rotate(360deg); opacity:0.1; }
}

.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;
    font-size:13px;
}

.submenu_wrapper
{
    position:absolute;
    background-color:lightgray;
    left:0;
    right:0;
    z-index:2;
  display: none;
}
.sidebar_wrapper
{
    position:absolute;
    background-color:lightgray;
    left:0;
    right:0;
    z-index:2;
  display: none;
}
.submenu:hover
{
    background-color:white;
}

.sidebar_option:hover div
{
    display:block;
}

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

.sidebar_option
{
    text-align:center;
    margin:10px;
    padding:10px;
    border-bottom:dotted 2px black;
    position:relative;
}

h1
{
    font-size:40px;
    text-align:left;
    text-transform:capitalize;
}

h2
{
    text-align:left;
    font-size:30px;
}

p
{
    text-align:justify;
    font-size:14px;
}

ul, li
{
    text-align:left;
    font-size:14px;
}
.title
{
    margin-left:40px;
    line-height:30px;
}
.title a:hover
{
    font-size:18px;
    font-weight:700;
}

td
{
    font-size:13px;
    min-width:120px;
    text-align:left;
    padding-left:10px;
}
.zebra
{
    background-color:white;
}
tr
{
    background-color:lightgray;
    height:45px;
}
form
{
    text-align:left;
    margin-left:30px;
    font-size:19px;
}
.img
{
    width:128.5px; 
    height:187.5px;
    margin-right:5px;
}
.img_gallery
{
    width:286px; 
    height:160.875px;
}

@media (max-width: 768px) {

    #container, #header, #content, #menu, #footer {
        width: auto;
        margin: 0px;
        height:auto;
    }
    #sidebar {
        display:none;
    }
    svg {
        height:30px;
        width:30px;
        line-height:30px;
        padding:0px;
    }
    .header_naglowek {
        font-size:25px;
    }
    h1 {
        font-size:24px;
    }
    p, #footer {
        font-size:12px;
    }
    ul, li {
        font-size:10px;
    }
    .menu_option {
        width:auto;
        height:auto;
        padding:0px;
        border-right:hidden;
        float:none;
    }
    .menu_option:hover {
        background-color:#73818c;
        cursor:auto;
    }
   .title a:hover {
    font-size:12px;
    font-weight:normal;
    cursor:auto;
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="container">
    <div id="header">
        <div class="header_naglowek">Moje hobby</div>
        <div style="float:left; padding:15px">
            <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 48.2 48.2">
                <path d="M43.7 19.7c0.5 3.3-1.8 6.5-5.1 7 -3.3 0.5-6.5-1.8-7-5.1 -0.5-3.3 1.8-6.5 5.1-7C40.1 14.1 43.2 16.4 43.7 19.7zM35.5 40.7c-2.8 1.8-6.6 1-8.5-1.8
                    -1.8-2.8-1-6.6 1.8-8.5 2.8-1.8 6.6-1 8.5 1.8C39.1 35.1 38.3 38.9 35.5 40.7L35.5 40.7zM20.8 24.1c0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3s-1.5 3.3-3.3
                    3.3C22.3 27.3 20.8 25.9 20.8 24.1zM20.2 40.1c-2.5 2.3-6.4 2.1-8.7-0.5 -2.3-2.5-2.1-6.4 0.4-8.7 2.5-2.3 6.4-2.1 8.7 0.5C22.9 34 22.7 37.9 20.2 40.1L20.2
                    40.1zM4.9 18.2c1.4-3.1 5-4.5 8.1-3.1 3.1 1.4 4.5 5 3.1 8.1 -1.4 3.1-5 4.5-8.1 3.1C4.9 24.9 3.5 21.3 4.9 18.2zM24.1 4.6c3.4 0 6.1 2.7 6.1 6.1 0 3.4-2.7
                    6.1-6.1 6.1 -3.4 0-6.1-2.7-6.1-6.1C18 7.4 20.7 4.6 24.1 4.6zM24.1 0C10.8 0 0 10.8 0 24.1c0 13.3 10.8 24.1 24.1 24.1 13.3 0 24.1-10.8 24.1-24.1C48.2 10.8
                    37.4 0 24.1 0" fill="#343434" class="reel" />
            </svg>
</div>
        <div style="clear:both"></div>
    </div>
    <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>
    <div id="sidebar">
        <a href="index.html"><div class="sidebar_option">Strona główna</div></a>
        <a href="gallery.html"><div class="sidebar_option">Galeria</div></a>
        <div class="sidebar_option">Reżyserzy
            <div class="sidebar_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="sidebar_option">Ulubione filmy</div></a>
        <a href="tvseries.html"><div class="sidebar_option">Seriale</div></a>
        <a href="contact.html"><div class="sidebar_option">Kontakt</div></a>
    </div>
    <div id="content">
        <h1>Strona główna</h1>
        <p>
            Interesuję się kinematografią. Na swojej stronie internetowej umieściłem 
            informacje na temat moich ulubionych reżyserów, wybranych filmów, a także
            seriali. Ponadto w zakładce Galeria znajdziesz zdjęcia z planu, kadry filmowe
            oraz plakaty. Poprzez zakładkę Kontakt możesz skontaktować się ze mną, zadać 
            pytanie lub doradzić.
        </p> <br />
        <p>
            Film to bardzo obszerna dziedzina i można ją podzielić na wiele sposobów. Podstawowy i najbardziej popularny z nich to podział na rodzaje:
        </p>
            <ul>
            <li>film fabularny – aktorski film fikcji,</li>
            <li>film animowany – tworzony za pomocą klasycznych technik poklatkowych – rysunkowych lub przestrzennych lub najnowszych technik komputerowych – animacji 3D,</li>
            <li>film dokumentalny – film o treści niefikcyjnej, dokumentujący rzeczywistość,</li>
            <li>film oświatowy – dla celów dydaktyczno-instruktażowych,</li>
            <li>film propagandowy – dla celów jakich w danym momencie wymaga propaganda</li>
            </ul>
        
        <p>
            Pojęcie filmu w społecznej świadomości najczęściej kojarzy się jednak z rozrywkowymi aktorskimi filmami fikcji nazywanymi też fabularnymi.

            W zależności od długości filmy dzielą się na:
        </p>
            <ul>
            <li>krótkometrażowe – do 22 minut,</li>
            <li>średniometrażowe – od 22 do 55 minut,</li>
            <li>pełnometrażowe – ponad 55 minut – przeciętnie 90-132 minut.</li>
            </ul>
        <p>   
            Dla telewizji powstają seriale telewizyjne złożone z wielu odcinków. Najczęściej stosowane długości odcinków to 13, 15, 25, 30, 50 minut.
        </p>
    </div>
      <p class="title"><a href="#header">Do góry</a></p>
    <div id="footer">
      Jakub Krzyżyński krzyzynskijakub@gmail.com 2016 &copy; Wszelkie prawa zastrzeżone
    </div>
  </div>
</body>
</html>

但是，正如我所说，使用框架/库并避免混乱的设计。