Question

我的代码包含HTML，CSS和js文件。虽然我对CSS学习JS很好，所以我陷入其中。输出中的绿色窗口似乎是滑动但不会发生。

我也在使用<script src="js/modernizr.custom.js"></script>来引用js页面，但它没有发生，所以即使我已经尝试了所有这些重新启动的东西但我也无法引用HTML，即使它不在同一个HTML页面上工作TAG

$( "#toggle" ).click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

* { font-family:courier; box-sizing:border-box; }

html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }

.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }

.menu.closed { left:-250px; }

#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }



.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }

<div id="toggle">
</div>

<div class="menu closed">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Logo</a></li>
      <li>Stuff</li>
      <li>Cooking</li>
      <li>Games</li>
    </ul>
</div>

Answer 1

您的CSS包含SCSS元素，例如

#toggle {
  ...
  #toggle:hover {
    cursor: pointer;
  }
  ...
}

纯CSS中没有嵌套。将这些嵌套规则转换为普通CSS（并将jQuery添加到代码段）以使其正常工作。

通常，请务必确保您的标记，样式和JavaScript代码没有语法错误。有很多工具可供选择。

$("#toggle").click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

* {
  font-family: courier;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background-color: floralwhite
}

.menu {
  width: 250px;
  height: 100%;
  position: fixed;
  background-color: seagreen;
  transition: all 1s;
  left: 0;
  z-index: 50;
  overflow-y: auto;
  padding-bottom: 100px;
}

.menu.closed {
  left: -250px;
}

#toggle {
  background-color: seagreen;
  height: 100%;
  min-height: 100%;
  width: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 25;
  transition: all .7s ease;
}

#toggle:hover {
  cursor: pointer;
}

#toggle.closed {
  left: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 85px 0 0 40px;
  padding-right: 40px;
}
.menu ul li {
  color: floralwhite;
  font-size: 20px;
  margin: 0 0 5px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  transition: all .3s;
}
.menu ul li:hover {
  background-color: lighten(seagreen, 10%);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>

<div class="menu closed">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Logo</a></li>
    <li>Stuff</li>
    <li>Cooking</li>
    <li>Games</li>
  </ul>
</div>

Answer 2

＆＃13;

$("#toggle").click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

＆＃13;

* {
  font-family: courier;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background-color: floralwhite
}

.menu {
  width: 250px;
  height: 100%;
  position: fixed;
  background-color: seagreen;
  transition: all 1s;
  left: 0;
  z-index: 50;
  overflow-y: auto;
  padding-bottom: 100px;
}

.menu.closed {
  left: -250px;
}

#wrapper { margin-left: 50px;}

#wrapper.closed{ left: 250px;  margin-left: 0px; transition: all .3s;  position: relative;}
#toggle {
  background-color: seagreen;
  height: 100%;
  min-height: 100%;
  width: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 25;
  transition: all .7s ease;
}

#toggle:hover {
  cursor: pointer;
}

#toggle.closed {
  left: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 85px 0 0 40px;
  padding-right: 40px;
}
.menu ul li {
  color: floralwhite;
  font-size: 20px;
  margin: 0 0 5px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  transition: all .3s;
}
.menu ul li:hover {
  background-color: lighten(seagreen, 10%);
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu 
</div>

<div class="menu closed">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Logo</a></li>
    <li>Stuff</li>
    <li>Cooking</li>
    <li>Games</li>
  </ul>
</div>

<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh  </div>

＆＃13;

幻灯片菜单没有滑动

2 个答案: