jquery切换类打开和关闭问题

dddzy1tm  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(245)

我正在尝试为响应大小制作开-关菜单。我用这个代码隐藏菜单

left: -50%;

但是当我尝试用这个代码打开它时，它不起作用。


# left-side.active {

  left: 60%;
}

以下是我的jquery切换代码：

function toggleLeftSideBar() {
  document.getElementById('#left-side').classList.toggle('active');
}

这是我的完整代码：

$("#accordion h3").click(function() {
  $(this).toggleClass('open');
  $(this).parent().siblings().find('h3').removeClass('open');
  $("#accordion ul ul").slideUp("fast");

  if (!$(this).next().is(":visible")) {
    $(this).next().slideDown("fast");
  }
})

function toggleLeftSideBar() {
  document.getElementById('#left-side').classList.toggle('active');
}

* {

  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  height: 100%;
  background-color: #f5f7f8;
}

h1 {
  text-align: center;
  padding: 0.6em 1em;
  font-size: 1.4em;
  background-color: #31363b;
  display: inline-block;
  width: 20%;
  position: fixed;
}

h1>a {
  text-decoration: none;
  color: #202326;
  ;
  transition: all 1s ease-in-out;
  font-weight: 900;
}

h1:hover>a {
  text-decoration: none;
  color: #aaa;
  ;
}

# h1-span {

  font-weight: bold;
  display: inline;
}

/* Left Side */

# left-side {

  height: 100%;
  width: 20%;
  background-color: #2a2f33;
  position: fixed;
  display: flex;
  overflow-x: hidden;
  top: 44px;
  left: 0;
}

/*Logo section*/

.logo-ul {
  width: 6%;
  background-color: #2a2f33;
}

.logo-li {
  padding: 0.5em;
}

.img-logo {
  width: 40px;
  height: 40px;
  opacity: 0.4;
  transition: all 1s ease;
}

.img-logo:hover {
  opacity: 1;
}

.notification-span {
  font-size: 10px !important;
  border-radius: 5px;
  border: 1px solid green;
  margin-left: 8px;
  padding: 1px 12px;
}

/*Accordion Menu*/

# accordion {

  width: 100%;
  background-color: #393d42;
  color: #fff;
}

# accordion h3 {

  text-transform: uppercase;
  font-size: 11px;
  line-height: 30px;
  padding: 10px 10px;
  cursor: pointer;
  transition: all .2s linear;
}

# accordion h3:hover {

  background-color: #f55661;
}

# accordion h3:hover i {

  color: #fff;
}

/* links */

# accordion ul ul li a {

  color: white;
  display: block;
  font-size: 11px;
  line-height: 27px;
  padding: 0 15px;
  text-decoration: none;
  transition: all .1s;
}

/* hover effect */

# accordion ul ul li a:hover {

  color: #f55661;
}

/* hide non-actives by default */

# accordion ul ul {

  display: none;
  list-style-type: disc;
  padding: 1.8em;
  background: #32363a
}

# accordion ul ul:first-child {

  background: #32363a;
}

/* #accordion li.active ul{
        display:block;
      }*/

/* Icon font styles */

# accordion h3 span {

  font-size: 16px;
  padding-right: 10px;
}

.left-icon i {
  color: #f55661;
}

.open {
  background-color: #f55661;
}

.open i {
  color: white;
}

/* Right Side */

# right-side {

  margin-left: 20%;
  width: 75%;
  padding: 10px;
}

.right-image {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.right-image img {
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

.rightside-ul {
  display: flex;
  margin: 1em;
}

.rightside-li {
  margin: 1em;
  font-size: .8em;
}

.rightside-li>a {
  text-decoration: none;
}

/*Card Area*/

.card-area {
  display: flex;
  flex-wrap: wrap;
}

/*Card Component*/

.card {
  padding: 1em;
}

h4 {
  color: #959595;
  font-size: 22px;
  margin-left: 1em;
}

.right-icon i {
  color: #fff;
}

.card-component {
  display: flex;
  padding: 1em;
}

.content-area {
  padding: 1em;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.statusbar {
  min-width: 1.5em;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.content-nav {
  display: flex;
}

.content-area p {
  width: 300px;
  text-align: left;
  align-items: center;
  margin-bottom: 1em;
}

.content-ul {
  display: flex;
  padding-bottom: 2em;
  margin-left: 4em;
}

.content-ul li {
  display: flex;
}

.content-ul li a {
  text-decoration: none;
  margin-right: 1em;
}

.img-container {
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-footer-ul {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}

.card-footer-ul li a {
  text-decoration: none;
}

.reaction-span {
  color: #acacac;
}

/* RESPONSİVE */

@media screen and (max-width: 988px) {
  body {
    font-size: .8em;
  }
  #left-side {
    min-width: 230px;
    left: -50%;
    /*This hides the menu to left*/
  }
  #right-size {
    margin-left: 10%;
    width: 70%;
    padding: 6px;
  }
  h1 {
    font-size: 1.2em;
    min-width: 230px;
    padding: 1em;
    display: none;
  }
  #accordion h3 {
    font-size: .7em;
  }
  #left-side.active {
    left: 60%;
  }
  .leftsidebarButton {
    position: absolute;
    left: 5%;
    top: 20px;
    cursor: pointer;
  }
  .leftsidebarButton::before {
    content: "\f0c9";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 2.2em;
    position: absolute;
    padding: 5px;
  }
}
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<div id="wrap-page">
  <h1><a href="https://www.sociality.io" target="_blank"><span id=h1-span>sociality</span>.io</h1></a>
    <section id="left-side" onclick="toggleLeftSideBar()">
      <div id="logo" class="active">
        <ul class="logo-ul">
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/instagramlogo.png" alt="instagram-logo"></a>
          </li>
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo"></a>
          </li>
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/pinterestlogo.png" alt="pinterest-logo"></a>
          </li>
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo"></a>
          </li>
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo"></a>
          </li>
          <li class="logo-li">
            <a href="#"><img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo"></a>
          </li>
        </ul>
      </div>
      <div id="accordion">
        <ul>
          <li class="active">
            <h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
          </li>
          <li>
            <h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
            <ul class>
              <li class="accordion-li "><a href="# ">Lorem</a></li>
              <li class="accordion-li "><a href="# ">Ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3><span class="left-icon icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
            <ul>
              <li class="accordion-li "><a href="# ">Lorem</a></li>
              <li class="accordion-li "><a href="# ">Ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3><span class="left-icon icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
            <ul>
              <li class="accordion-li "><a href="# ">Lorem</a></li>
              <li class="accordion-li "><a href="# ">Ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3><span class="left-icon icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
            <ul>
              <li class="accordion-li "><a href="# ">Lorem</a></li>
              <li class="accordion-li "><a href="# ">Ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3><span class="left-icon icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
            <ul>
              <li class="accordion-li "><a href="# ">Lorem</a></li>
              <li class="accordion-li "><a href="# ">Ipsum</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="leftsidebarButton "></div>
  </section>
<section id="right-side ">
  <ul style="list-style: disc; " class="rightside-ul ">
    <li style="color:#acacac " class="rightside-li ">
      <a href="# "><span style="color:black ">Published</span></a>
    </li>
    <li style="color:#3ac183 " class="rightside-li ">
      <a href="# "><span style="color:black ">Scheduled</span></a>
    </li>
    <li style="color:#f7bf38; white-space: nowrap; " class="rightside-li ">
      <a href="# "><span style="color:black ">Need Approval</span></a>
    </li>
    <li style="color:#fb6450 " class="rightside-li ">
      <a href="# "><span style="color:black ">Error</span></a>
    </li>
    <li style="color:#67b1f2 " class="rightside-li ">
      <a href="# "><span style="color:black ">Notes</span></a>
    </li>

    <div class="right-image ">
      <img src="images/fakefacegenerator.jpg " alt="profileimage ">
    </div>
  </ul>

  <h4>14 January 2016</h4>
  <!--Card Components -->
  <div class="card-area ">

    <div class="card ">

      <div class="card-component ">
        <div style="background-color: #3ac183; " class="statusbar ">
          <span class="right-icon "> <i class="fab fa-facebook-f "></i> </span>
        </div>

        <div class="content-area ">

          <div class="content-nav ">
            <h5>14 January 2016 - 14:30</h5>
            <ul class="content-ul ">
              <li> <a href="# "><span class="reaction-span "> <i class="fas fa-ban "></i> </a></span>
              </li>
              <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
              </li>
              <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
              </li>
            </ul>
          </div>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>

          <div class="img-container ">
            <img src="images/icecream1.jpg " alt="icecream1 ">
          </div>

          <div class="card-footer-nav ">
            <ul class="card-footer-ul ">
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card ">
    <div class="card-component ">
      <div style="background-color: #f7bf38; " class="statusbar ">
        <span class="right-icon "> <i class="fab fa-twitter "></i> </span>
      </div>
      <div class="content-area ">
        <div class="content-nav ">
          <h5>14 January 2016 - 14:30</h5>
          <ul class="content-ul ">
            <li> <a href="# "><span class="reaction-span "> <i class="fas fa-check "></i> </a></span>
            </li>
            <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
            </li>
            <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
            </li>
          </ul>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
        <div class="img-container ">
          <img src="images/icecream2.jpg " alt="icecream1 ">
        </div>
        <div class="card-footer-nav ">
          <ul class="card-footer-ul ">
            <li>
              <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
            </li>
            <li>
              <a href="# "> <span class="reaction-span "><i class="fas fa-retweet "></i></span> 0 </a>
            </li>
            <li>
              <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
            </li>
            <li>
              <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <h4>12 January 2016</h4>
  <!--Card Components -->
  <div class="card-area ">
    <div class="card ">
      <div class="card-component ">
        <div style="background-color: #acacac; " class="statusbar ">
          <span class="right-icon "><i class="fab fa-facebook-f "></i> </span>
        </div>
        <div class="content-area ">
          <div class="content-nav ">
            <h5>14 January 2016 - 14:30</h5>
            <ul class="content-ul ">
              <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
              </li>
              <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
              </li>
            </ul>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
          <div class="img-container ">
            <img src="images/dog1.jpg " alt="icecream1 ">
          </div>
          <div class="card-footer-nav ">
            <ul class="card-footer-ul ">
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="card ">
      <div class="card-component ">
        <div style="background-color: #acacac; " class="statusbar ">
          <span class="right-icon "> <i class="fab fa-twitter "></i> </span>
        </div>
        <div class="content-area ">
          <div class="content-nav ">
            <h5>14 January 2016 - 14:30</h5>
            <ul class="content-ul ">
              <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
              </li>
              <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
              </li>
            </ul>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
          <div class="img-container ">
            <img src="images/dog1.jpg " alt="icecream1 ">
          </div>
          <div class="card-footer-nav ">
            <ul class="card-footer-ul ">
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="fas fa-retweet "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="card ">
      <div class="card-component ">
        <div style="background-color: #acacac; " class="statusbar ">
          <span class="right-icon "> <i class="fab fa-instagram "></i> </span>
        </div>
        <div class="content-area ">
          <div class="content-nav ">
            <h5>14 January 2016 - 14:30</h5>
            <ul class="content-ul ">
              <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
              </li>
              <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
              </li>
            </ul>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
          <div class="img-container ">
            <img src="images/dog1.jpg " alt="icecream1 ">
          </div>
          <div class="card-footer-nav ">
            <ul class="card-footer-ul ">
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
              </li>
              <li>
                <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
jqueryJavaScriptHtmlfrontendcss

1条答案

按热度按时间
jei2mxaa

jei2mxaa1#

我将提供一个更简单的方法，你可以遵循隐藏和显示边栏

$('.toggle').click(function() {
  $('.sidebar').toggleClass('active');
});

* {

  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.d-flex {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 300px;
  background-color: blueviolet;
  transition: width 500ms ease-out;
}

.main {
  width: 100%;
  background-color: cyan;
}

.sidebar.active {
  width: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>

<div class="d-flex">
  <div class="sidebar">f</div>
  <div class="main">
    <a class="toggle" href="javascript:void(0)">toggle</a>
  </div>
</div>
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com