更改文字和關閉菜單

目前我的導航欄文字是菜單，單擊時我想菜單切換到關閉，並在菜單中關閉它應該回去說菜單更改文字和關閉菜單

這裏我當前的代碼 - 點擊它更改爲「關閉」，但不會更改回：

jQuery(document).ready(function() { 

    jQuery(".menu-Trigger").click(function() { 

     jQuery(".nav-menu").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-Expanded").css("display", ""); 

      }); 
     $(".menu-Trigger").html("Close"); 
    }); 
});

HTML和CSS代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Arshdeep Soni</title> 
     <meta charset="utf-8"/> 
     <meta name="viewport" content="width=device-width, inital-scale=1"> 

     <link rel="stylesheet" type="text/css" href="reset.css"> 
     <script type="text/javascript" src="js/jquery.js"></script> 

     <script type="text/javascript" src="script.js"> 
     </script> 

     <style type="text/css"> 

      body { 
       background-image: url(Final6Lower.jpg); 
       background-size: auto 100%; 
       background-attachment: fixed; 
       background-repeat: no-repeat; 
       background-position: center center; 

      } 

      .nav-menu li, .nav-menu a{ 
       display: inline-flex; 
       color: rgb(137, 134, 134); 
       text-decoration: none; 
       font-family: Raleway; 
       padding-right: 15px; 
       font-size: 12px; 
       letter-spacing: 7px; 

      } 
      .nav-menu { 
       margin-top: 25px; 
       text-align: center; 
      } 

      .nav-menu li, .nav-menu a:hover { 
       color:white; 
      } 

      .socialIcons img { 
       height: 50px; 
       width: 50px; 
       opacity: 0.4; 
       filter: alpha(opacity=40); 
       margin-right: 10px; 
      } 
      icons img { 
       position:relative; 
       display: inline; 
       margin-right: 0 auto; 
       margin-left: 0 auto; 
      } 

      .icons { 
       text-align: center; 
       position:absolute; 
       bottom:10px; 
       left:0; 
       width: 100%; 

      } 

      .socialIcons img:hover { 
       opacity:1; 
       color:white; 
      } 

      .menu-Trigger { 
       display:none; 
      } 

      div.nav-menu ul { 
       margin:0; 
       padding:0; 
      } 

      div.nav-menu ul li { 
       list-style: none; 
      } 


      @media screen and (max-width: 600px) { 

       .menu-Trigger { 
        display: block; 
        color:white; 
        background-color: black; 
        padding:10px; 
        text-align: center; 
        cursor:pointer; 
        font-family: raleway; 
       } 

       div.nav-menu ul li { 
        display:block; 
        float:none; 
        padding:8px; 
        background-color: black; 
       } 

       div.nav-menu { 
        display:none; 
       } 

       div.nav-Expanded { 
        display: block; 
       } 
      } 


     </style> 
    </head> 

    <body> 

     <div class="header"> 
     </div>      

     <span class="menu-Trigger" align="center" >Menu</span> 
     <div class="nav-menu"> 
      <ul> 
       <li><a href=#>HOME</a></li> 
       <li><a href=#>VIDEOS</a></li> 
       <li><a href=#>IMAGES</a></li> 
       <li><a href=#>TESTIMONIALS</a></li> 
       <li><a href=#>CONTACT</a></li> 
      </ul> 
     </div> 

      <div class="icons"> 
       <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a> 
     <a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a> 
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a> 
       <a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a> 
      </div> 
    </body> 
</html>

來源

2015-05-13 RandomMath

你需要一個布爾值，來檢查菜單是否打開，然後，根據該布爾的結果，改變文本。 – evolutionxbox

什麼是'.nav-Expanded'類用於？它是否習慣於說明菜單是打開還是關閉，或者它是否也有與之相關的樣式？ – War10ck

這可以很容易地與CSS（和一個小的標記更改）完成。如果您對此感興趣，請顯示您的HTML。 – isherwood

我認爲你只是缺少如果表達式檢查磨片你的菜單是否擴展。不知道你的html，但這可能工作：

jQuery(document).ready(function() { 

    jQuery(".menu-Trigger").click(function() { 

     jQuery(".nav-menu").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-Expanded").css("display", ""); 

      }); 
     if (jQuery(this).hasClass("nav-Expanded")) 
      $(".menu-Trigger").html("Close"); 
     else 
      $(".menu-Trigger").html("Menu"); 
    }); 
});

來源

2015-05-13 13:49:17 user3154108

這似乎沒有工作，菜單欄甚至沒有打開，然後 – RandomMath

檢查控制檯的錯誤消息，也許編輯你的問題到你的問題 - 如果條件，我還犯了一個錯字 – user3154108

在看到你的HTML，我認爲這應該是工作。我編輯瞭解決錯誤的答案，再試一次。 – user3154108

更改文字和關閉菜單

回答

相關問題