隠しサブメニューがクリックして表示されるjavascript

Question

私は自分のウェブサイトを反応的にしています。 1つのメニューオプションをクリックするとサブメニューが表示され、もう一度クリックすると消えます。

JSが機能していません。代わりに.on()メソッドを使用してください

$(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

。以下のように：

$(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>

しかし、私が言ったように、フレームワーク/ライブラリを使用し、その混沌dessignsを避けます。