當從下拉菜單中選擇列表時，讓div消失

當用戶使用iphone 6plus或更低版本並且下拉菜單正常工作時，我做了一個下拉菜單，但是當您點擊「jobs或contact」時，它會打開，但是下拉菜單停留在那裏。如何在iPhone 6plus寬度和更低的點擊列表項目後「隱藏」。我有下拉菜單設置了切換功能，以便更好地理解它。當從下拉菜單中選擇列表時，讓div消失

演示：

http://codepen.io/anon/pen/VpyNwa

的Html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 


     <link rel="stylesheet" type="text/css" href="magicstyle.css"> 

     </head>  
     <body> 
      <!-- Section for Jobs Popup --> 
      <div id="top-bar"> 
        <a id="burger-nav"></a> 
        <ul id="nav-menu" class="blah"> 
        <li id="job" class="testAgain">Job</li> 
        <li id="contact" class="testAgain">Contact</li> 
        <li id="press" class="testAgain">Press</li> 
        <li id="legal" class="testAgain">Legal</li> 
        <li id="support" class="testAgain">Support</li> 


       </ul> 
        <!--<div id="nav-menu"> 
        <span id="job">Jobs</span> 
        <span id="contact">Contact</span> 
        <span id="press">Press</span> 
        <span id="legal">Legal</span> 
        <span id="support">Support</span> 

        </div> --> 


       </div> 
       <div id="job-popup"> 
      <div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div> 
      <div id="job-content"> 

       <h1 id="jobWords"></h1> 

       </div> 

      </div> 
      <!-- Section for Contact Popup --> 
      <div id="contact-popup"> 
      <div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div> 
      <div id="contact-content"> 

       <h1 id="contactWords"></h1> 

       </div> 

      </div> 

      <!-- Section for Press Popu --> 
      <div id="press-popup"> 
      <div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div> 
      <div id="press-content"> 

       <h1 id="pressWords"></h1> 

       </div> 

      </div> 

      <div id="legal-popup"> 
      <div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div> 
      <div id="legal-content"> 

       <h1 id="legalWords"></h1> 

       </div> 

      </div> 

      <div id="support-popup"> 
      <div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div> 
      <div id="support-content"> 

       <h1 id="supportWords"></h1> 

       </div> 

      </div> 




      <div id="container"> 


       <div id="name-div"> 
       <h1 id="name">Open Touch</h1> 
       </div> 
       <ul class="bubbles"> 

      <li id="firstCircle"></li> 
      <li id="secondCircle"></li> 
      <li id="thirdCircle"></li> 
      <li id="fourthCircle"></li> 
      <li id="fifthCircle"></li> 
      <li id="sixthCircle"></li> 



      </ul> 



      </div> 



     </body>

任何幫助表示讚賞

</html>

來源

2017-03-19 Jagr

它看起來不像下拉菜單 –

嘗試在JS添加此：

$('.testAgain').click(function(){ $('.blah').removeClass('open') })

來源

2017-03-19 19:54:48 rynomite

非常感謝 – Jagr

當從下拉菜單中選擇列表時，讓div消失

回答

相關問題