通过添加和删除类

Question

正如您在下面的代码片段中看到的，我有一个垂直侧边栏，当单击TOGGLE按钮时，它可以变得更宽。边栏缓入动画，并在侧边栏宽时显示说明文字。我想我已经完成了所有这些。

我更关心的是我的代码。感觉不对劲。无论如何我只需添加和删除css类就可以做到这一点吗？

此外，我想建议我使用延迟的方式，以确保当额外的描述文本出现时，它看起来并不可怕。

var menuSize = 'Small';

$(".js-menu-toggle").click(function(e) {
  e.preventDefault();

  if (menuSize == 'Small') {
    $('#sidebar').css('width', '180px');
    $('#content-wrapper').css('margin-left', '180px');

    $('#sidebar').css('-webkit-transition', 'all 0.3s ease');
    $('#sidebar').css('-moz-transition', 'all 0.3s ease');
    $('#sidebar').css('-ms-transition', 'all 0.3s ease');
    $('#sidebar').css('-o-transition', 'all 0.3s ease');
    $('#sidebar').css('transition', 'all 0.3s ease');
    $('#app-wrapper').css('-webkit-transition', 'all 0.3s ease');
    $('#app-wrapper').css('-moz-transition', 'all 0.3s ease');
    $('#app-wrapper').css('-ms-transition', 'all 0.3s ease');
    $('#app-wrapper').css('-o-transition', 'all 0.3s ease');
    $('#app-wrapper').css('transition', 'all 0.3s ease');

    $('.menu-item-desc').delay(120).show(0);

    menuSize = 'Large'
  } else {
    $('#sidebar').css('width', '50px');
    $('#content-wrapper').css('margin-left', '50px');

    $('#sidebar').css('-webkit-transition', 'all 0.3s ease');
    $('#sidebar').css('-moz-transition', 'all 0.3s ease');
    $('#sidebar').css('-ms-transition', 'all 0.3s ease');
    $('#sidebar').css('-o-transition', 'all 0.3s ease');
    $('#sidebar').css('transition', 'all 0.3s ease');
    $('#content-wrapper').css('-webkit-transition', 'all 0.3s ease');
    $('#content-wrapper').css('-moz-transition', 'all 0.3s ease');
    $('#content-wrapper').css('-ms-transition', 'all 0.3s ease');
    $('#content-wrapper').css('-o-transition', 'all 0.3s ease');
    $('#content-wrapper').css('transition', 'all 0.3s ease');

    $('.menu-item-desc').hide();

    menuSize = 'Small'
  }
});

html,
body {
  height: 100vh;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  z-index: 2;
  background-color: #102027;
  color: #fff;
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar a {
  color: #fff;
}

#content-wrapper {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  margin-left: 50px;
  padding-top: 100px;
  padding-bottom: 30px;
}

#header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  height: 100px;
}

#header {
  width: 100%;
  height: 50px;
  background-color: #fff;
}

#subheader {
  width: 100%;
  height: 50px;
  background-color: #37474f;
  color: #fff;
  clear: right;
}

#content {
  position: relative;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-top: solid 1px #cfcfcf;
  background: #fff;
}

.menu-item-desc {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar">
  <a class="js-menu-toggle" href="#">TOGL</a>
  <ul>
    <li>Item 1<span class="menu-item-desc"> - Item 1 Desc</span></li>
    <li>Item 2<span class="menu-item-desc"> - Item 2 Desc</span></li>
    <li>Item 3<span class="menu-item-desc"> - Item 3 Desc</span></li>
  </ul>
</div>
<div id="content-wrapper">
  <div id="header-wrapper">
    <div id="header" class="container-fluid">Header</div>
  </div>
  <div id="content" class="container-fluid">PRIMARY CONTENT</div>
</div>

Answer 1

是的，你可以！相应地使用addClass，removeClass和toggleClass。

例如，#sidebar元素可以分配一个类：

.toggle-slidein {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

在你的jQuery中你可以像这样应用它：

$('#sidebar').addClass('toggle-slidein');

负责这些代码：

$('#sidebar').css('-webkit-transition', 'all 0.3s ease');
$('#sidebar').css('-moz-transition', 'all 0.3s ease');
$('#sidebar').css('-ms-transition', 'all 0.3s ease');
$('#sidebar').css('-o-transition', 'all 0.3s ease');
$('#sidebar').css('transition', 'all 0.3s ease');

您可以根据需要将其扩展到代码的其余部分。

修改：为toggleClass和sidebar提供content-wrapper示例：

首先添加一些CSS类，它们将代表您想要动态更改的元素的更改。

.sidebar--large {
  width: 180px;
}
.content-wrapper--pushleft {
  margin-left: 180px;
}

然后在你的jQuery中：

$(".js-menu-toggle").click(function(e) {
  e.preventDefault();

  if (menuSize == 'Small') {
    $('#sidebar').toggleClass('sidebar--large');
    $('#content-wrapper').toggleClass('content-wrapper--pushLeft');
    //... other code
    menuSize = 'Large';

  } else {
    $('#sidebar').toggleClass('sidebar--large');
    $('#content-wrapper').toggleClass('content-wrapper--pushLeft');
    //... other code
    menuSize = 'Small';
  }
}

使用toggleClass的jQuery代码通过检查指定的类名来创建切换效果;所以如果缺少则添加类名，如果已在元素上设置则删除类名。

Answer 2

正如其他一些答案中提到的（我在编写代码后注意到），你可以使用jQuery的toggleClass函数来实现这一点。

$(".js-menu-toggle").click(function(e) {
  e.preventDefault();
  $("#sidebar").toggleClass("expanded");
  $("#content-wrapper").toggleClass("expanded");
});

html,
body 

{
  height: 100vh;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  z-index: 2;
  background-color: #102027;
  color: #fff;
  transition: all 0.3s ease;
  overflow: hidden;
   white-space: nowrap;
}
#sidebar.expanded {
   width: 180px;
}
#sidebar .menu-item-desc {
   display: inline-block;
   white-space: nowrap;
  transition: all 0.3s ease;
    opacity: 0;
   visibility: hidden;
}
#sidebar .menu-item-desc:hover{
   display: block;
}
#sidebar.expanded .menu-item-desc {
   opacity: 1;
    visibility: visible;
}
#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar a {
  color: #fff;
}

#content-wrapper {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  margin-left: 50px;
  padding-top: 100px;
  padding-bottom: 30px;
  transition: all 0.3s ease;
}
#content-wrapper.expanded {
    margin-left: 180px;
}
#header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  height: 100px;
}

#header {
  width: 100%;
  height: 50px;
  background-color: #fff;
}

#subheader {
  width: 100%;
  height: 50px;
  background-color: #37474f;
  color: #fff;
  clear: right;
}

#content {
  position: relative;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-top: solid 1px #cfcfcf;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar">
  <a class="js-menu-toggle" href="#">TOGL</a>
  <ul>
    <li>Item 1<span class="menu-item-desc"> - Item 1 Desc</span></li>
    <li>Item 2<span class="menu-item-desc"> - Item 2 Desc</span></li>
    <li>Item 3<span class="menu-item-desc"> - Item 3 Desc</span></li>
  </ul>
</div>
<div id="content-wrapper">
  <div id="header-wrapper">
    <div id="header" class="container-fluid">Header</div>
  </div>
  <div id="content" class="container-fluid">PRIMARY CONTENT</div>
</div>

Answer 3

呜呜！你的Javascript中有很多CSS！是的，您可以简单地将所有内容放入CSS类中，然后在Javascript中动态添加/删除所述类。看看这个问题应该回答你的问题：）

Here!

Answer 4

是的，你可以。

如果使用所需的css样式创建类，则可以使用jquery：

切换它们

$('#sidebar').toggleClass('class-name', true)添加了该课程 $('#sidebar').toggleClass('class-name', false)删除了班级

只需为每个菜单大小添加类，并根据需要在事件中添加/删除它们。

Answer 5

很好的问题我认为你要找的是jquery中的.toggleClass方法，或者你可以使用.addClass和.removeClass我在这里提供了链接：

• toggleClass
• addClass / removeClass