jquery切换类打开和关闭问题

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

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

  1. left: -50%;

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

  2. # left-side.active {
  4.   left: 60%;
  5. }

以下是我的jquery切换代码：

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

这是我的完整代码：

  1. $("#accordion h3").click(function() {
  2.   $(this).toggleClass('open');
  3.   $(this).parent().siblings().find('h3').removeClass('open');
  4.   $("#accordion ul ul").slideUp("fast");
  6.   if (!$(this).next().is(":visible")) {
  7.     $(this).next().slideDown("fast");
  8.   }
  9. })
  11. function toggleLeftSideBar() {
  12.   document.getElementById('#left-side').classList.toggle('active');
  13. }
  2. * {
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   font-family: 'Raleway', sans-serif;
  9.   height: 100%;
  10.   background-color: #f5f7f8;
  11. }
  13. h1 {
  14.   text-align: center;
  15.   padding: 0.6em 1em;
  16.   font-size: 1.4em;
  17.   background-color: #31363b;
  18.   display: inline-block;
  19.   width: 20%;
  20.   position: fixed;
  21. }
  23. h1>a {
  24.   text-decoration: none;
  25.   color: #202326;
  26.   ;
  27.   transition: all 1s ease-in-out;
  28.   font-weight: 900;
  29. }
  31. h1:hover>a {
  32.   text-decoration: none;
  33.   color: #aaa;
  34.   ;
  35. }
  37. # h1-span {
  39.   font-weight: bold;
  40.   display: inline;
  41. }
  43. /* Left Side */
  45. # left-side {
  47.   height: 100%;
  48.   width: 20%;
  49.   background-color: #2a2f33;
  50.   position: fixed;
  51.   display: flex;
  52.   overflow-x: hidden;
  53.   top: 44px;
  54.   left: 0;
  55. }
  57. /*Logo section*/
  59. .logo-ul {
  60.   width: 6%;
  61.   background-color: #2a2f33;
  62. }
  64. .logo-li {
  65.   padding: 0.5em;
  66. }
  68. .img-logo {
  69.   width: 40px;
  70.   height: 40px;
  71.   opacity: 0.4;
  72.   transition: all 1s ease;
  73. }
  75. .img-logo:hover {
  76.   opacity: 1;
  77. }
  79. .notification-span {
  80.   font-size: 10px !important;
  81.   border-radius: 5px;
  82.   border: 1px solid green;
  83.   margin-left: 8px;
  84.   padding: 1px 12px;
  85. }
  87. /*Accordion Menu*/
  89. # accordion {
  91.   width: 100%;
  92.   background-color: #393d42;
  93.   color: #fff;
  94. }
  96. # accordion h3 {
  98.   text-transform: uppercase;
  99.   font-size: 11px;
  100.   line-height: 30px;
  101.   padding: 10px 10px;
  102.   cursor: pointer;
  103.   transition: all .2s linear;
  104. }
  106. # accordion h3:hover {
  108.   background-color: #f55661;
  109. }
  111. # accordion h3:hover i {
  113.   color: #fff;
  114. }
  116. /* links */
  118. # accordion ul ul li a {
  120.   color: white;
  121.   display: block;
  122.   font-size: 11px;
  123.   line-height: 27px;
  124.   padding: 0 15px;
  125.   text-decoration: none;
  126.   transition: all .1s;
  127. }
  129. /* hover effect */
  131. # accordion ul ul li a:hover {
  133.   color: #f55661;
  134. }
  136. /* hide non-actives by default */
  138. # accordion ul ul {
  140.   display: none;
  141.   list-style-type: disc;
  142.   padding: 1.8em;
  143.   background: #32363a
  144. }
  146. # accordion ul ul:first-child {
  148.   background: #32363a;
  149. }
  151. /* #accordion li.active ul{
  152.         display:block;
  153.       }*/
  155. /* Icon font styles */
  157. # accordion h3 span {
  159.   font-size: 16px;
  160.   padding-right: 10px;
  161. }
  163. .left-icon i {
  164.   color: #f55661;
  165. }
  167. .open {
  168.   background-color: #f55661;
  169. }
  171. .open i {
  172.   color: white;
  173. }
  175. /* Right Side */
  177. # right-side {
  179.   margin-left: 20%;
  180.   width: 75%;
  181.   padding: 10px;
  182. }
  184. .right-image {
  185.   display: flex;
  186.   justify-content: flex-end;
  187.   width: 100%;
  188. }
  190. .right-image img {
  191.   width: 3em;
  192.   height: 3em;
  193.   border-radius: 50%;
  194. }
  196. .rightside-ul {
  197.   display: flex;
  198.   margin: 1em;
  199. }
  201. .rightside-li {
  202.   margin: 1em;
  203.   font-size: .8em;
  204. }
  206. .rightside-li>a {
  207.   text-decoration: none;
  208. }
  210. /*Card Area*/
  212. .card-area {
  213.   display: flex;
  214.   flex-wrap: wrap;
  215. }
  217. /*Card Component*/
  219. .card {
  220.   padding: 1em;
  221. }
  223. h4 {
  224.   color: #959595;
  225.   font-size: 22px;
  226.   margin-left: 1em;
  227. }
  229. .right-icon i {
  230.   color: #fff;
  231. }
  233. .card-component {
  234.   display: flex;
  235.   padding: 1em;
  236. }
  238. .content-area {
  239.   padding: 1em;
  240.   background-color: #fff;
  241.   border-radius: 5px;
  242.   display: flex;
  243.   flex-direction: column;
  244.   align-content: center;
  245. }
  247. .statusbar {
  248.   min-width: 1.5em;
  249.   background-color: green;
  250.   display: flex;
  251.   align-items: center;
  252.   justify-content: center;
  253.   border-radius: 3px;
  254. }
  256. .content-nav {
  257.   display: flex;
  258. }
  260. .content-area p {
  261.   width: 300px;
  262.   text-align: left;
  263.   align-items: center;
  264.   margin-bottom: 1em;
  265. }
  267. .content-ul {
  268.   display: flex;
  269.   padding-bottom: 2em;
  270.   margin-left: 4em;
  271. }
  273. .content-ul li {
  274.   display: flex;
  275. }
  277. .content-ul li a {
  278.   text-decoration: none;
  279.   margin-right: 1em;
  280. }
  282. .img-container {
  283.   width: 300px;
  284.   height: 200px;
  285.   margin: 0 auto;
  286. }
  288. .img-container img {
  289.   width: 100%;
  290.   height: 100%;
  291.   object-fit: cover;
  292. }
  294. .card-footer-ul {
  295.   display: flex;
  296.   justify-content: space-around;
  297.   margin-top: 1em;
  298. }
  300. .card-footer-ul li a {
  301.   text-decoration: none;
  302. }
  304. .reaction-span {
  305.   color: #acacac;
  306. }
  308. /* RESPONSİVE */
  310. @media screen and (max-width: 988px) {
  311.   body {
  312.     font-size: .8em;
  313.   }
  314.   #left-side {
  315.     min-width: 230px;
  316.     left: -50%;
  317.     /*This hides the menu to left*/
  318.   }
  319.   #right-size {
  320.     margin-left: 10%;
  321.     width: 70%;
  322.     padding: 6px;
  323.   }
  324.   h1 {
  325.     font-size: 1.2em;
  326.     min-width: 230px;
  327.     padding: 1em;
  328.     display: none;
  329.   }
  330.   #accordion h3 {
  331.     font-size: .7em;
  332.   }
  333.   #left-side.active {
  334.     left: 60%;
  335.   }
  336.   .leftsidebarButton {
  337.     position: absolute;
  338.     left: 5%;
  339.     top: 20px;
  340.     cursor: pointer;
  341.   }
  342.   .leftsidebarButton::before {
  343.     content: "\f0c9";
  344.     font-family: 'Font Awesome\ 5 Free';
  345.     font-weight: 900;
  346.     font-size: 2.2em;
  347.     position: absolute;
  348.     padding: 5px;
  349.   }
  350. }
  1. <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;700&display=swap" rel="stylesheet">
  2. <script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
  3. <div id="wrap-page">
  4.   <h1><a href="https://www.sociality.io" target="_blank"><span id=h1-span>sociality</span>.io</h1></a>
  5.     <section id="left-side" onclick="toggleLeftSideBar()">
  6.       <div id="logo" class="active">
  7.         <ul class="logo-ul">
  8.           <li class="logo-li">
  9.             <a href="#"><img class="img-logo" src="images/instagramlogo.png" alt="instagram-logo"></a>
  10.           </li>
  11.           <li class="logo-li">
  12.             <a href="#"><img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo"></a>
  13.           </li>
  14.           <li class="logo-li">
  15.             <a href="#"><img class="img-logo" src="images/pinterestlogo.png" alt="pinterest-logo"></a>
  16.           </li>
  17.           <li class="logo-li">
  18.             <a href="#"><img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo"></a>
  19.           </li>
  20.           <li class="logo-li">
  21.             <a href="#"><img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo"></a>
  22.           </li>
  23.           <li class="logo-li">
  24.             <a href="#"><img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo"></a>
  25.           </li>
  26.         </ul>
  27.       </div>
  28.       <div id="accordion">
  29.         <ul>
  30.           <li class="active">
  31.             <h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
  32.           </li>
  33.           <li>
  34.             <h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
  35.             <ul class>
  36.               <li class="accordion-li "><a href="# ">Lorem</a></li>
  37.               <li class="accordion-li "><a href="# ">Ipsum</a></li>
  38.             </ul>
  39.           </li>
  40.           <li>
  41.             <h3><span class="left-icon icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
  42.             <ul>
  43.               <li class="accordion-li "><a href="# ">Lorem</a></li>
  44.               <li class="accordion-li "><a href="# ">Ipsum</a></li>
  45.             </ul>
  46.           </li>
  47.           <li>
  48.             <h3><span class="left-icon icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
  49.             <ul>
  50.               <li class="accordion-li "><a href="# ">Lorem</a></li>
  51.               <li class="accordion-li "><a href="# ">Ipsum</a></li>
  52.             </ul>
  53.           </li>
  54.           <li>
  55.             <h3><span class="left-icon icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
  56.             <ul>
  57.               <li class="accordion-li "><a href="# ">Lorem</a></li>
  58.               <li class="accordion-li "><a href="# ">Ipsum</a></li>
  59.             </ul>
  60.           </li>
  61.           <li>
  62.             <h3><span class="left-icon icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
  63.             <ul>
  64.               <li class="accordion-li "><a href="# ">Lorem</a></li>
  65.               <li class="accordion-li "><a href="# ">Ipsum</a></li>
  66.             </ul>
  67.           </li>
  68.         </ul>
  69.       </div>
  70.     </div>
  71.     <div class="leftsidebarButton "></div>
  72.   </section>
  73. <section id="right-side ">
  74.   <ul style="list-style: disc; " class="rightside-ul ">
  75.     <li style="color:#acacac " class="rightside-li ">
  76.       <a href="# "><span style="color:black ">Published</span></a>
  77.     </li>
  78.     <li style="color:#3ac183 " class="rightside-li ">
  79.       <a href="# "><span style="color:black ">Scheduled</span></a>
  80.     </li>
  81.     <li style="color:#f7bf38; white-space: nowrap; " class="rightside-li ">
  82.       <a href="# "><span style="color:black ">Need Approval</span></a>
  83.     </li>
  84.     <li style="color:#fb6450 " class="rightside-li ">
  85.       <a href="# "><span style="color:black ">Error</span></a>
  86.     </li>
  87.     <li style="color:#67b1f2 " class="rightside-li ">
  88.       <a href="# "><span style="color:black ">Notes</span></a>
  89.     </li>
  91.     <div class="right-image ">
  92.       <img src="images/fakefacegenerator.jpg " alt="profileimage ">
  93.     </div>
  94.   </ul>
  96.   <h4>14 January 2016</h4>
  97.   <!--Card Components -->
  98.   <div class="card-area ">
  100.     <div class="card ">
  102.       <div class="card-component ">
  103.         <div style="background-color: #3ac183; " class="statusbar ">
  104.           <span class="right-icon "> <i class="fab fa-facebook-f "></i> </span>
  105.         </div>
  107.         <div class="content-area ">
  109.           <div class="content-nav ">
  110.             <h5>14 January 2016 - 14:30</h5>
  111.             <ul class="content-ul ">
  112.               <li> <a href="# "><span class="reaction-span "> <i class="fas fa-ban "></i> </a></span>
  113.               </li>
  114.               <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
  115.               </li>
  116.               <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
  117.               </li>
  118.             </ul>
  119.           </div>
  121.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
  123.           <div class="img-container ">
  124.             <img src="images/icecream1.jpg " alt="icecream1 ">
  125.           </div>
  127.           <div class="card-footer-nav ">
  128.             <ul class="card-footer-ul ">
  129.               <li>
  130.                 <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
  131.               </li>
  132.               <li>
  133.                 <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
  134.               </li>
  135.               <li>
  136.                 <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
  137.               </li>
  138.               <li>
  139.                 <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
  140.               </li>
  141.             </ul>
  142.           </div>
  143.         </div>
  144.       </div>
  145.     </div>
  146.   </div>
  147.   <div class="card ">
  148.     <div class="card-component ">
  149.       <div style="background-color: #f7bf38; " class="statusbar ">
  150.         <span class="right-icon "> <i class="fab fa-twitter "></i> </span>
  151.       </div>
  152.       <div class="content-area ">
  153.         <div class="content-nav ">
  154.           <h5>14 January 2016 - 14:30</h5>
  155.           <ul class="content-ul ">
  156.             <li> <a href="# "><span class="reaction-span "> <i class="fas fa-check "></i> </a></span>
  157.             </li>
  158.             <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
  159.             </li>
  160.             <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
  161.             </li>
  162.           </ul>
  163.         </div>
  164.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
  165.         <div class="img-container ">
  166.           <img src="images/icecream2.jpg " alt="icecream1 ">
  167.         </div>
  168.         <div class="card-footer-nav ">
  169.           <ul class="card-footer-ul ">
  170.             <li>
  171.               <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
  172.             </li>
  173.             <li>
  174.               <a href="# "> <span class="reaction-span "><i class="fas fa-retweet "></i></span> 0 </a>
  175.             </li>
  176.             <li>
  177.               <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
  178.             </li>
  179.             <li>
  180.               <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
  181.             </li>
  182.           </ul>
  183.         </div>
  184.       </div>
  185.     </div>
  186.   </div>
  187.   <h4>12 January 2016</h4>
  188.   <!--Card Components -->
  189.   <div class="card-area ">
  190.     <div class="card ">
  191.       <div class="card-component ">
  192.         <div style="background-color: #acacac; " class="statusbar ">
  193.           <span class="right-icon "><i class="fab fa-facebook-f "></i> </span>
  194.         </div>
  195.         <div class="content-area ">
  196.           <div class="content-nav ">
  197.             <h5>14 January 2016 - 14:30</h5>
  198.             <ul class="content-ul ">
  199.               <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
  200.               </li>
  201.               <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
  202.               </li>
  203.             </ul>
  204.           </div>
  205.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
  206.           <div class="img-container ">
  207.             <img src="images/dog1.jpg " alt="icecream1 ">
  208.           </div>
  209.           <div class="card-footer-nav ">
  210.             <ul class="card-footer-ul ">
  211.               <li>
  212.                 <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
  213.               </li>
  214.               <li>
  215.                 <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
  216.               </li>
  217.               <li>
  218.                 <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
  219.               </li>
  220.               <li>
  221.                 <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
  222.               </li>
  223.             </ul>
  224.           </div>
  225.         </div>
  226.       </div>
  227.     </div>
  228.     <div class="card ">
  229.       <div class="card-component ">
  230.         <div style="background-color: #acacac; " class="statusbar ">
  231.           <span class="right-icon "> <i class="fab fa-twitter "></i> </span>
  232.         </div>
  233.         <div class="content-area ">
  234.           <div class="content-nav ">
  235.             <h5>14 January 2016 - 14:30</h5>
  236.             <ul class="content-ul ">
  237.               <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
  238.               </li>
  239.               <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
  240.               </li>
  241.             </ul>
  242.           </div>
  243.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
  244.           <div class="img-container ">
  245.             <img src="images/dog1.jpg " alt="icecream1 ">
  246.           </div>
  247.           <div class="card-footer-nav ">
  248.             <ul class="card-footer-ul ">
  249.               <li>
  250.                 <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
  251.               </li>
  252.               <li>
  253.                 <a href="# "> <span class="reaction-span "><i class="fas fa-retweet "></i></span> 0 </a>
  254.               </li>
  255.               <li>
  256.                 <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
  257.               </li>
  258.               <li>
  259.                 <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
  260.               </li>
  261.             </ul>
  262.           </div>
  263.         </div>
  264.       </div>
  265.     </div>
  266.     <div class="card ">
  267.       <div class="card-component ">
  268.         <div style="background-color: #acacac; " class="statusbar ">
  269.           <span class="right-icon "> <i class="fab fa-instagram "></i> </span>
  270.         </div>
  271.         <div class="content-area ">
  272.           <div class="content-nav ">
  273.             <h5>14 January 2016 - 14:30</h5>
  274.             <ul class="content-ul ">
  275.               <li> <a href="# "><span class="reaction-span "> <i class="far fa-trash-alt "></i> </a></span>
  276.               </li>
  277.               <li> <a href="# "><span class="reaction-span "> <i class="fas fa-info-circle "></i> </a></span>
  278.               </li>
  279.             </ul>
  280.           </div>
  281.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
  282.           <div class="img-container ">
  283.             <img src="images/dog1.jpg " alt="icecream1 ">
  284.           </div>
  285.           <div class="card-footer-nav ">
  286.             <ul class="card-footer-ul ">
  287.               <li>
  288.                 <a href="# "> <span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0 </a>
  289.               </li>
  290.               <li>
  291.                 <a href="# "> <span class="reaction-span "><i class="far fa-comment "></i></span> 0 </a>
  292.               </li>
  293.               <li>
  294.                 <a href="# "> <span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0 </a>
  295.               </li>
  296.               <li>
  297.                 <a href="# "> <span class="reaction-span "><i class="far fa-eye "></i></span> 0 </a>
  298.               </li>
  299.             </ul>
  300.           </div>
  301.         </div>
  302.       </div>
  303.     </div>
  304.   </div>
  305. </section>
  306. </div>
  307. <script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
jqueryJavaScriptHtmlfrontendcss

1条答案

按热度按时间
jei2mxaa

jei2mxaa1#

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

  1. $('.toggle').click(function() {
  2.   $('.sidebar').toggleClass('active');
  3. });
  2. * {
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100%;
  9.   height: 100vh;
  10.   overflow-x: hidden;
  11.   margin: 0;
  12.   padding: 0;
  13. }
  15. .d-flex {
  16.   display: flex;
  17.   height: 100%;
  18. }
  20. .sidebar {
  21.   width: 300px;
  22.   background-color: blueviolet;
  23.   transition: width 500ms ease-out;
  24. }
  26. .main {
  27.   width: 100%;
  28.   background-color: cyan;
  29. }
  31. .sidebar.active {
  32.   width: 0;
  33. }
  1. <script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
  3. <div class="d-flex">
  4.   <div class="sidebar">f</div>
  5.   <div class="main">
  6.     <a class="toggle" href="javascript:void(0)">toggle</a>
  7.   </div>
  8. </div>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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