Question

关闭侧边菜单并且不确定如何使其正常工作时，我遇到了发生转换效果的问题。它看起来应该有效，但它不想

$(document).ready(function() {

});

$('#Toggler').on('click', function() {
  $('#SideBarNavSlide').toggleClass("SideBarNavSlide2");
});

#SideBarNavSlide {
  width: 225px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
}

.SideBarNavSlide2 {
  width: 50px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
  -webkit-transition: width 2s;
  transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div id="TheContainer" class="container-fluid" style="border:1px solid red; background-color:pink;padding:0; margin-top:0px;">
  <div id="headerMenu" style="width:100%!important;height:35px;background-color:cyan;">
    <button id="Toggler" style="margin-left:10px; margin-top:4px;"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div id="SideBarNavSlide">
  </div>
  <div id="ContentArea" style="float:right; border:1px solid white; background-color:purple; width:100%; height:100%; position:fixed; margin-left:225px!important;">
    <div class="row">
      <div class="col-md-12 col-lg-12" style="border:1px solid black; background-color:yellow; position:fixed;height:100%; width:100%; margin-left:20px!important">
      </div>
    </div>
  </div>
</div>

Answer 1

id更具体，并且优先于类...因此您只需使用#SideBarNavSlide.SideBarNavSlide2{代替.SideBarNavSlide2{

$(document).ready(function() {
  $('#Toggler').on('click', function() {
    $('#SideBarNavSlide').toggleClass("SideBarNavSlide2");
  });
});

#SideBarNavSlide{
  width: 225px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
}

#SideBarNavSlide.SideBarNavSlide2{
  width: 50px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
  -webkit-transition: width 2s;
  transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div id="TheContainer" class="container-fluid" style="border:1px solid red; background-color:pink;padding:0; margin-top:0px;">
  <div id="headerMenu" style="width:100%!important;height:35px;background-color:cyan;">
    <button id="Toggler" style="margin-left:10px; margin-top:4px;"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div id="SideBarNavSlide" class="anotherClass">
  </div>
  <div id="ContentArea" style="float:right; border:1px solid white; background-color:purple; width:100%; height:100%; position:fixed; margin-left:225px!important;">
    <div class="row">
      <div class="col-md-12 col-lg-12" style="border:1px solid black; background-color:yellow; position:fixed;height:100%; width:100%; margin-left:20px!important">
      </div>
    </div>
  </div>
</div>

Answer 2

类的优先级低于ID，因此您应该使用#SideBarNavSlide.SideBarNavSlide2而不是.SideBarNavSlide2。此外，将过渡应用于初始状态，使其在两个方向都有效。

＆＃13;

$('#Toggler').on('click', function() {
  $('#SideBarNavSlide').toggleClass("SideBarNavSlide2");
});

＆＃13;

#SideBarNavSlide {
  width: 225px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
  -webkit-transition: width 2s;
  transition: width 2s;
}

#SideBarNavSlide.SideBarNavSlide2 {
  width: 50px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div id="TheContainer" class="container-fluid" style="border:1px solid red; background-color:pink;padding:0; margin-top:0px;">
  <div id="headerMenu" style="width:100%!important;height:35px;background-color:cyan;">
    <button id="Toggler" style="margin-left:10px; margin-top:4px;"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div id="SideBarNavSlide">
  </div>
  <div id="ContentArea" style="float:right; border:1px solid white; background-color:purple; width:100%; height:100%; position:fixed; margin-left:225px!important;">
    <div class="row">
      <div class="col-md-12 col-lg-12" style="border:1px solid black; background-color:yellow; position:fixed;height:100%; width:100%; margin-left:20px!important">
      </div>
    </div>
  </div>
</div>

＆＃13;

顺便说一下，考虑使用较少的内联样式。

关闭侧滑菜单时无法获得过渡效果

2 个答案: