Question

所以它适用于jfiddle。

//site .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");
    }
  });
})();

/*site.css*/

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text],
input[type=password],
textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  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 #222;
  padding: 3px;
}

.menu {
  font-size: 12px;
}

.menu li {
  list-style-type: none;
}

.menu li.active {
  font-weight: bold;
}

.menu li a {
  color: #eee;
}

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
  transition: left ease .25s;
}

#sidebar.hide-sidebar {
  left: -250px;
  transition: left ease .25s;
}

#wrapper {
  margin: 0 0 0 250px;
  transition: margin-left ease .25s;
}

#wrapper.hide-sidebar {
  margin-left: 0;
  transition: margin-left ease .25s;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/site.css" />
</head>

<body>

  <div id="sidebar" class="">
    <span id="userName">Test</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="">
    <div id="main">
      <div>
        <button id="sidebarToggle">Toggle Menu</button>
      </div>
      <h1>My site</h1>

    </div>
    <div id="footer">
      &copy; 2017
    </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>

由于某种原因，当我从visual studio调试它时，它不起作用。 JQuery正在工作，并将类添加到指定的目标，但CSS没有应用于它们。

我确实在自己的文件中有css，在自己的文件中也有jQuery。我已添加我的文件放在评论中的位置，以显示它的外观。

我必须遗漏一些东西，但它可能是什么？

Answer 1

我最终工作正常，但您忘记了jQuery，如果您使用的是旧浏览器，可能需要为-webkit- css3添加前缀transition。

＆＃13;

//site .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");
    }
  });
})();

＆＃13;

/*site.css*/

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text],
input[type=password],
textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  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 #222;
  padding: 3px;
}

.menu {
  font-size: 12px;
}

.menu li {
  list-style-type: none;
}

.menu li.active {
  font-weight: bold;
}

.menu li a {
  color: #eee;
}

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
  transition: left ease .25s;
}

#sidebar.hide-sidebar {
  left: -250px;
  transition: left ease .25s;
}

#wrapper {
  margin: 0 0 0 250px;
  transition: margin-left ease .25s;
}

#wrapper.hide-sidebar {
  margin-left: 0;
  transition: margin-left ease .25s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/site.css" />
</head>

<body>

  <div id="sidebar" class="">
    <span id="userName">Test</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="">
    <div id="main">
      <div>
        <button id="sidebarToggle">Toggle Menu</button>
      </div>
      <h1>My site</h1>

    </div>
    <div id="footer">
      &copy; 2017
    </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>

＆＃13;

为什么在使用JQuery添加类后没有应用CSS？

1 个答案: