Question

我试图这样做，以便当我点击按钮时，侧边栏div将向左移动。所以我的计划是：我添加了一个按钮，创建一个var来控制#sidebar和#wrapper div，添加了一个toggleClass，类会将#sidebar div移动到负值（因此将其移出页面）。

这里是js：

(function () {
    var $sidebarAndWrapper = $("#sidebar,#wrapper");
    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $(this).text("Show Sidebar");
        } else {
            $(this).text("Hide Sidebar");
        }
    });

})();

这是css：

body {
    font-family: sans-serif;
    font-size: 15px;
    margin: 0;
}

label {
    font-weight: bold;
    display: block;
}

input[type=text], input[type=password], textarea {
    width: 175px;
}

#main {
    background-color: #e9e9e9;
    padding: 4px;
    margin: 0;
}

#footer {
    background-color: #222;
    color: #eee;
    padding: 8px 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.headshot {
    max-width: 50px;
    border: 1px solid #ff0000;
    padding: 3px;
}

.menu {
    font-size:12px;
}

    .menu li {
        list-style-type:none;
    }

    .menu li.active {
        font-weight: bold;
    }

#sidebar {
    background: #2A2C34;
    color: #eee;
    /*position: fixed;*/
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
}

    #sidebar.hide-sidebar {
        left: -250px;
        background-color: #a3bfff;
    }

#wrapper {
    margin: 0 0 0 250px;
}

    #wrapper.hide-sidebar {
        margin-left: 250px;
    }

这是html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>The World</title>

  <link rel="stylesheet" href="css/site.css"/>
</head>

<body style="font-family: sans-serif; font-size: 15px">

  <div id="sidebar">
    <img src="img/user.jpg" alt="Random guy" class="headshot"/>
    <span id="username">Random Name</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div id="wrapper">
    <div id="main">
      <div>
        <button id="sidebarToggle">Hide Sidebar</button>
      </div>
      <h2>The World - from .NET Core 2.0</h2>

      <form>
        <div>
          <label>Date</label>
          <input />
        </div>
        <div>
          <label>Location</label>
          <input />
        </div>
        <div><input type="submit" value="Add" /></div>
      </form>
    </div>

    <div id="footer">
      &copy; 2017 Farid Ahamat
    </div>
  </div>
  <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="js/site.js"></script>
</body>
</html>

那么，为什么边栏div不向左移动，或者单击按钮时背景颜色是否改变了？每当我点击按钮时，我都能看到文字发生了变化。

注意：我是通过遵循Pluralsight课程来做到这一点的，所以如果可能的话，尽量坚持在这里完成的方式（可能有更好但完全不同的方式）。

Answer 1

我只是评论css position: fixed;及其工作

var $sidebarAndWrapper = $("#sidebar,#wrapper");
//console.log($sidebarAndWrapper);
$("#sidebarToggle").on("click", function () {
    $sidebarAndWrapper.toggleClass("hide-sidebar");
    if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
        $(this).text("Show Sidebar");
    } else {
        $(this).text("Hide Sidebar");
    }
});

body {
    font-family: sans-serif;
    font-size: 15px;
    margin: 0;
}

label {
    font-weight: bold;
    display: block;
}

input[type=text], input[type=password], textarea {
    width: 175px;
}

#main {
    background-color: #e9e9e9;
    padding: 4px;
    margin: 0;
}

#footer {
    background-color: #222;
    color: #eee;
    padding: 8px 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.headshot {
    max-width: 50px;
    border: 1px solid #ff0000;
    padding: 3px;
}

.menu {
    font-size:12px;
}

    .menu li {
        list-style-type:none;
    }

    .menu li.active {
        font-weight: bold;
    }

#wrapper.hide-sidebar {
    margin: 0 0 0 250px;
    transition:0.5s;
}

#sidebar {
    background: #2A2C34;
    color: #eee;
    /*position: relative;*/
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
    float:left;
     transition:0.5s;
}

    #sidebar.hide-sidebar {
        width:0px;
        transition:0.5s;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar">
    <img src="img/user.jpg" alt="Random guy" class="headshot" />
    <span id="username">Random Name</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div id="wrapper" class="hide-sidebar">
    <div id="main">
      <div>
        <button id="sidebarToggle">Hide Sidebar</button>
      </div>
      <h2>The World - from .NET Core 2.0</h2>
  </div>

Answer 2

好的，终于找到了它无法正常工作的原因。

页面是从缓存加载的，所以我只需要禁用缓存，它现在正在运行。

为什么我的css类从未执行过？

2 个答案: