Question

你可以帮我改进下面这段代码吗？！我试图用jquery工作侧边栏菜单，但我不知道我哪里出错了... 这是我的代码：

html:
    <!DOCTYPE html>
    <html lang="PT-BR">
      <head>
        <meta charset="utf-8">
        <title>Teste Menu c Javascript</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="/js/jquery-3.2.0.min.js">
      </head>
      <body>
        <div class="sidebar">
         <ul>
           <h2>Menu</h2>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
         </ul>
        </div>
        <div class="nav">
            <img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/>
        </div>
       <script src="js/script.js"></script>
     </body>
    </html>

css:
    body{
     margin: 0;
    }

    .sidebar{
     position: absolute;
     width: 250px;
     height:100%;
     background: #333;
     color: white;
     font-family: arial;
      outline: 1px solid #2a2a2a;
    }

    .sidebar h2{
     text-align: center;
     margin: 0;
     padding: 10px;
     background: #2a2a2a;
    }

    .sidebar ul{
     list-style: none;
     padding: 0;
     margin: 0;
    }

    .sidebar li{
     outline: 1px solid #2a2a2a;
     transition: all 0.3s;
    }

    .sidebar li:hover{
     background: #444;
     border-left: 5px solid #eee;
    }

    .sidebar a{
     text-decoration: none;
     color: white;
     display: block;
     padding: 10px;

    }
    .nav{
     width: 100%;
     height: 100%;
     position: absolute;
     background: white;
     padding: 30px;
     transition: all 0.3s;

    }

    .menu-bar{
     cursor: pointer;
    }

    .open{
     transform: translateX(250px);
    }

js:

    $('.menu-bar').on('click', function(){
     $('.nav').toggleClass('open');
    });

我不知道问题是jquery链接还是别的......

Answer 1

您的代码并不完全正确。从语义的角度来看，h2标签和什么都不应该保留在ul标签内和li标签之外。

这里有一个简单的例子：

此示例使用 css translate3d 功能，该功能在GPU上运行而不在CPU上运行，这对于性能问题是一件好事。

https://jsfiddle.net/c4hjhbp4/

<强> HTML

<div class="nav">
  <button id='show-hide-menu'>
    Menu
  </button>
</div>
<div class="sidebar-container">
  <div class="sidebar" id='sidebar'>
     <h2>Menu</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

javascript（jQuery）

$('#show-hide-menu').click(function() {
    if ($('#sidebar').hasClass('visible')) {
    $('#sidebar').removeClass('visible');
  } else {
    $('#sidebar').addClass('visible');
  }
});

<强> CSS

body, html {
  margin: 0;
  padding: 0;
}
.sidebar-container {
  position: relative;
  width: 0;
  height: 0;
}

.sidebar {
  position: absolute;
  width: 230px;
  height: 400px;
  background: #ccc;
  transform: translate3d(-230px,0,0);
  transition: transform 0.5s;
}`enter code here`

侧边栏菜单与jQuery

1 个答案: