toggleClass 只能工作一次，但不适用于所有需要的场景

问题描述 投票：0回答：1

我的切换类在特定场景下不起作用（我也尝试过使用 addClass 和 removeClass 但仍然没有注意到。

我制作了 5 个栏，其中有一个按钮可以打开栏并关闭另一个打开的栏。当您按下打开的栏上的关闭按钮时，我希望该栏关闭（有效）并希望左侧的栏（灰色）再次打开。这样，当所有彩色条关闭时，灰色条始终打开。

希望有人知道我的脚本有什么问题。

代码：

$(document).ready(function() {

  $(".b1 tab").click(function() {
    $(".b1").toggleClass("open");
    $(".b2, .b3, .b4, .b5").removeClass("open");
  });

  $(".b2 tab").click(function() {
    $(".b2").toggleClass("open");
    $(".b1, .b3, .b4, .b5").removeClass("open");
  });

  $(".b3 tab").click(function() {
    $(".b3").toggleClass("open");
    $(".b1, .b2, .b4, .b5").removeClass("open");
  });

  $(".b4 tab").click(function() {
    $(".b4").toggleClass("open");
    $(".b1, .b2, .b3, .b5").removeClass("open");
  });

  $(".b5 tab").click(function() {
    $(".b5").toggleClass("open");
    $(".b1, .b2, .b3, .b4").removeClass("open");
  });

  $(".b2.open tab").click(function() {
    $(".b1").toggleClass("open");
  });

});
/* Standard values */

:root {
  --unit: calc(100vh / 20);
  --bar-close: calc(4 * var(--unit));
  --bar-open: calc(100vw - (20 * var(--unit)));
  --padding: calc(2 * var(--unit));
  --icon: calc(var(--unit) / 2);
  --green: rgba(0, 90, 50, 1);
  --red: rgba(255, 5, 15, 1);
  --white: rgba(255, 255, 255, 1);
  --gray: rgba(190, 190, 190, 1);
  --blue: rgba(20, 20, 100, 1);
  --yellow: rgba(250, 200, 50, 1);
  --brown: rgba(110, 75, 40, 1);
  --orange: rgba(250, 110, 0, 1);
  background-color: var(--white) !important;
  color: var(--gray) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: calc(var(--unit) / 2) !important;
  line-height: calc(var(--unit) / 2 * 1) !important;
  font-weight: 700 !important;
  text-decoration: none;
}


/* END Standard values */


/* General Values */

icon {
  float: left;
  position: relative;
  display: block;
  width: var(--icon);
  height: var(--icon);
}

icon svg {
  width: var(--icon);
  height: var(--icon);
  fill: var(--white);
}


/* END General Values */

html {
  background: red;
}

body {
  background-color: var(--white) !important;
  margin: 0px 0px 0px 0px !important;
  padding: 0px 0px 0px 0px !important;
}

wrapper {
  float: left;
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(100vw - (4 * var(--unit)));
  height: calc(100vh - (4 * var(--unit)));
  margin: calc(2 * var(--unit));
}

bar {
  float: left;
  position: relative;
  display: block;
  overflow: hidden;
  width: var(--bar-close);
  height: calc(100vh - (2 * var(--padding)));
  background: blue;
  overflow: hidden !important;
  transition: width 0.6s ease;
}

bar.open {
  width: var(--bar-open);
}

bar.b1 {
  background: var(--gray);
}

bar.b1 tab {
  background: var(--white);
}

bar.b1 tab icon svg {
  fill: var(--gray);
}

bar.b2 {
  background: var(--orange);
}

bar.b2 tab {
  background: var(--orange);
}

bar.b3 {
  background: var(--green);
}

bar.b3 tab {
  background: var(--red);
}

bar.b4 {
  background: var(--brown);
}

bar.b4 tab {
  background: var(--brown);
}

bar.b5 {
  background: var(--blue);
}

bar.b5 tab {
  background: var(--yellow);
}

bar inner {
  float: left;
  position: relative;
  display: block;
  width: calc(100% - (2 * var(--padding)));
  height: 100%;
  padding: var(--padding);
}

bar tab {
  float: none;
  position: absolute;
  display: block;
  width: var(--bar-close);
  height: calc(100% / 2);
  bottom: 0px;
  right: 0px;
  background: red;
}

bar tab icon {
  float: none;
  position: absolute;
  bottom: calc(3.5 * var(--icon));
  right: calc(3.5 * var(--icon));
  transform: rotate(0deg);
  transition: transform 0.6s ease;
}

bar.open tab icon {
  transform: rotate(45deg);
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>GETTING STARTED WITH BRACKETS</title>
  <meta name="description" content="An interactive getting started guide for Brackets.">
  <link rel="stylesheet" href="main.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

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

</head>

<body>

  <wrapper>

    <bar class="b1">
      <inner>
        test
      </inner>
      <tab>
        <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
      </tab>
    </bar>

    <bar class="b2">
      <inner>
        test
      </inner>
      <tab>
        <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
      </tab>
    </bar>

    <bar class="b3">
      <inner>
        test
      </inner>
      <tab>
        <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
      </tab>
    </bar>

    <bar class="b4">
      <inner>
        test
      </inner>
      <tab>
        <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
      </tab>
    </bar>

    <bar class="b5">
      <inner>
        test
      </inner>
      <tab>
        <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
      </tab>
    </bar>

  </wrapper>

</body>

</html>

我首先尝试使用 addClass 和 removeClass 按钮，并使用 div 上的 .close 和 .open 类，但这也不起作用。然后我想它可能适用于toggleClass，但仍然没有改变任何东西。

javascript html css class toggle
1个回答
0
投票

要执行您所要求的操作，您应该首先向具有相同共同行为的所有元素添加一个共同类。在下面的示例中，我使用了 

.column
，因为它们看起来就是这样。

从那里，您可以将一个 single 事件处理程序附加到所有这些事件处理程序，以切换它们的 

.open
类，并且也可以在第一个 
.column
元素上进行相反的操作。

试试这个：

jQuery($ => {
  const $firstColumn = $('.column:first');
  
  $('.column tab').on('click', e => {
    const $targetColumn = $(e.target).closest('.column');
    $targetColumn.toggleClass('open');
    $firstColumn.toggleClass('open', !$targetColumn.hasClass('open'));
  });
});
/* Standard values */

 :root {
  --unit: calc(100vh / 20);
  --bar-close: calc(4 * var(--unit));
  --bar-open: calc(100vw - (20 * var(--unit)));
  --padding: calc(2 * var(--unit));
  --icon: calc(var(--unit) / 2);
  --green: rgba(0, 90, 50, 1);
  --red: rgba(255, 5, 15, 1);
  --white: rgba(255, 255, 255, 1);
  --gray: rgba(190, 190, 190, 1);
  --blue: rgba(20, 20, 100, 1);
  --yellow: rgba(250, 200, 50, 1);
  --brown: rgba(110, 75, 40, 1);
  --orange: rgba(250, 110, 0, 1);
  background-color: var(--white) !important;
  color: var(--gray) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: calc(var(--unit) / 2) !important;
  line-height: calc(var(--unit) / 2 * 1) !important;
  font-weight: 700 !important;
  text-decoration: none;
}


/* END Standard values */


/* General Values */

icon {
  float: left;
  position: relative;
  display: block;
  width: var(--icon);
  height: var(--icon);
}

icon svg {
  width: var(--icon);
  height: var(--icon);
  fill: var(--white);
}


/* END General Values */

html {
  background: red;
}

body {
  background-color: var(--white) !important;
  margin: 0px 0px 0px 0px !important;
  padding: 0px 0px 0px 0px !important;
}

wrapper {
  float: left;
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(100vw - (4 * var(--unit)));
  height: calc(100vh - (4 * var(--unit)));
  margin: calc(2 * var(--unit));
}

bar {
  float: left;
  position: relative;
  display: block;
  overflow: hidden;
  width: var(--bar-close);
  height: calc(100vh - (2 * var(--padding)));
  background: blue;
  overflow: hidden !important;
  transition: width 0.6s ease;
}

bar.open {
  width: var(--bar-open);
}

bar.b1 {
  background: var(--gray);
}

bar.b1 tab {
  background: var(--white);
}

bar.b1 tab icon svg {
  fill: var(--gray);
}

bar.b2 {
  background: var(--orange);
}

bar.b2 tab {
  background: var(--orange);
}

bar.b3 {
  background: var(--green);
}

bar.b3 tab {
  background: var(--red);
}

bar.b4 {
  background: var(--brown);
}

bar.b4 tab {
  background: var(--brown);
}

bar.b5 {
  background: var(--blue);
}

bar.b5 tab {
  background: var(--yellow);
}

bar inner {
  float: left;
  position: relative;
  display: block;
  width: calc(100% - (2 * var(--padding)));
  height: 100%;
  padding: var(--padding);
}

bar tab {
  float: none;
  position: absolute;
  display: block;
  width: var(--bar-close);
  height: calc(100% / 2);
  bottom: 0px;
  right: 0px;
  background: red;
}

bar tab icon {
  float: none;
  position: absolute;
  bottom: calc(3.5 * var(--icon));
  right: calc(3.5 * var(--icon));
  transform: rotate(0deg);
  transition: transform 0.6s ease;
}

bar.open tab icon {
  transform: rotate(45deg);
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<wrapper>
  <bar class="column b1">
    <inner>
      test
    </inner>
    <tab>
      <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
    </tab>
  </bar>
  <bar class="column b2">
    <inner>
      test
    </inner>
    <tab>
      <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
    </tab>
  </bar>
  <bar class="column b3">
    <inner>
      test
    </inner>
    <tab>
      <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
    </tab>
  </bar>
  <bar class="column b4">
    <inner>
      test
    </inner>
    <tab>
      <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
    </tab>
  </bar>
  <bar class="column b5">
    <inner>
      test
    </inner>
    <tab>
      <icon class="plus"><svg viewBox="0 0 28 28"><polygon points="28,12.5 15.5,12.5 15.5,0 12.5,0 12.5,12.5 0,12.5 0,15.5 12.5,15.5 12.5,28 15.5,28 15.5,15.5 28,15.5 "/></svg></icon>
    </tab>
  </bar>
</wrapper>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.