Question

我正试图找出一种方法，可以在我的网络应用程序顶部切换菜单图标。基本上，用户可以单击菜单图标，然后打开一个非画布面板，菜单图标变为关闭（x）图标，让用户可以选择关闭面板。到目前为止，我已经让面板以我想要的方式打开，但我无法让图标更改并正常运行。这是我到目前为止所拥有的。

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->

      <link rel="manifest" href="manifest.json">
      <!-- Tags to allow users to save to phone in fullscreen -->
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="default">
      <!-- /// -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/pwrpg.css">


    <title>Hello, world!</title>

  </head>
  <body>

      <header id="header" class="bg-success">

            <div class="left-head">
              <div class="navbutton"><a href="javascript:void(0)" onclick="openNav()" class="menu-icon"><span class="icon-menu"></span></a> | <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" class="menu-icon">Close</a></div>
            </div>
            <div class="logo-head">
             Logo
            </div>
            <div class="right-head">
                <div class="chatbutton"><a href="javascript:void(0)" onclick="openChat()" class="menu-icon">Open</a> | <a href="javascript:void(0)" class="closebtn" onclick="closeChat()" class="menu-icon">Close</a></div>
            </div>

      </header>
<div id="wrapper">



    <div id="sidebar-left">
    <ul>
    <li><a href="index.php">Index</a></li>    
    <li><a href="page.php">Page</a></li>       
    </ul>



    </div>
        <div id="sidebar-right">right sidebar</div>
    <div id="main">

Page 1 <a href="index.php">Back</a>


   </div>        
</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
      <script src="js/pwrpg.js"></script>


  </body>
</html>

CSS

#header {position: relative;height:50px;    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}
.left-head, .logo-head, .right-head {    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;}
.left-head{text-align: left;max-width: 20%;}
.logo-head{text-align: center;max-width:60%;}
.right-head{text-align: right;max-width:20%;}
.navbutton {display:none;}
.chatbutton {display:none;}
.navbutton {display:block;padding: 5px 10px;}
    .chatbutton {display:block;padding: 5px 10px;}

    .icon-menu {font-size:36px;}

JS

/* Main Navigation on Handheld Devices */
function openNav() {
    document.getElementById("sidebar-left").classList.add("transition-in");
     document.getElementById("sidebar-right").classList.remove("transition-in");
}
function closeNav() {
    document.getElementById("sidebar-left").classList.remove("transition-in");   
}


/* Chat Box on Handheld Devices */
function openChat() {
    document.getElementById("sidebar-right").classList.add("transition-in");
    document.getElementById("sidebar-left").classList.remove("transition-in"); 
}
function closeChat() {
    document.getElementById("sidebar-right").classList.remove("transition-in"); 
}


window.addEventListener('click', function(e){

    if (document.getElementById('main').contains(e.target)){
    document.getElementById("sidebar-left").classList.remove("transition-in");
        document.getElementById("sidebar-right").classList.remove("transition-in"); 
  } else{

  }
})

https://jsfiddle.net/23Lu2k8m/

打开/关闭菜单图标切换

0 个答案: