Question

我正在实施w3-sidebar： https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over

该代码使用＆＃34; hanburger＆＃34;打开侧边菜单和关闭X＆＃34;菜单项再次关闭它。

我想使用相同的＆＃34; hanburger＆＃34;用于切换打开和关闭操作的图标。因此，我已经添加了hanburger：

.w3-sidebar {
  margin-top: 42px;
}

代码是：

＆＃13;

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
    <!-- Sidebar -->
    <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
      <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>

    <!-- Page Content -->
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
    </div>

    <img src="img_car.jpg" alt="Car" style="width:100%">

    <div class="w3-container">
      <p>This sidebar is hidden by default, (style="display:none")</p>
      <p>You must click on the "hamburger" icon (top left) to open it.</p>
      <p>The sidebar will hide a part of the page content.</p>
    </div>
  </body>
</html>

＆＃13;

Answer 1

易。变化：

<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>

到

<button class="w3-button w3-teal w3-xlarge" onclick="w3_toggle()">☰</button>

并添加：

   function w3_toggle() {
        if (document.getElementById("topMenu").style.display == "none") {
            document.getElementById("topMenu").style.display = "block";
        } else { 
            document.getElementById("topMenu").style.display = "none";
        }
    }

w3-sidebar汉堡包切换

1 个答案: