用于两个切换的 jQuery/JavaScript if 语句

Question

我在标题中有两个具有不同内容的切换（toggle-1 和 toggle-2）。我想阻止用户同时激活两个切换（否则它们会重叠）。在下面的代码中，我尝试使用 if 语句来隐藏一个切换，如果另一个已经打开，但它不起作用。理想情况下，我希望发生的是，如果 toggle-1 处于活动状态并且用户单击 toggle-2，则 toggle-1 将返回其原始状态，而 toggle-2 现在将处于活动状态。反过来也是一样。我还不熟悉 JavaScript，如果您能告诉我我做错了什么以及应该如何做才能获得理想的结果，我将不胜感激如果你觉得它更容易，这里是我的 CodePen 的链接：https ://codepen.io/fergos2/pen/NWWxgEpvar myTogglevar oneToggle = $(document).ready(function() {  $('.toggle-1').click(function() {    $('.toggle-1').toggleClass('active')    $('.toggle-1-content').toggleClass('active')  })})var twoToggle = $(document).ready(function() {  $('.toggle-2').click(function() {    $('.toggle-2').toggleClass('active')    $('.toggle-2-content').toggleClass('active')  })})if (myToggle == oneToggle) {  $(document).ready(function() {    $('toggle-2-content').hide();  })} else if (myToggle == twoToggle) {  $('toggle-1-content').hide();}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">  <div class="wrapper">    <div class="toggle-1">1</div>    <div class="toggle-1-content">      <p>Some content 1</p>    </div>    <div class="toggle-2">2</div>    <div class="toggle-2-content">      <p>Some content 2</p>    </div>  </div></div>

Answer 1

几个问题。

请研究下面的代码

• 太多 $(document.ready... 并且不需要存储这样的语句的结果

• 使用数据属性和公共类，可以大大缩短代码。DRY 不要重复自己

• 我也简化了内容容器 CSS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="wrapper">

    <div class="toggle-1">1</div>

    <div class="toggle-1-content">

      <p>Some content 1</p>

    </div>

    <div class="toggle-2">2</div>

    <div class="toggle-2-content">

      <p>Some content 2</p>

    </div>

  </div>

</div>

Answer 2

工作代码：

$(document).ready(function() {

  $('.toggle-1').click(function() {

    if ($('.toggle-2').hasClass('active')) {

      // remove toggle-2 active classes

      $('.toggle-2').removeClass('active');

      $('.toggle-2-content').removeClass('active');

    }

    

    $('.toggle-1').toggleClass('active');

    $('.toggle-1-content').toggleClass('active');

  });

  

  $('.toggle-2').click(function() {

    if ($('.toggle-1').hasClass('active')) {

      // remove toggle-1 active classes

      $('.toggle-1').removeClass('active');

      $('.toggle-1-content').removeClass('active');

    }

    

    $('.toggle-2').toggleClass('active');

    $('.toggle-2-content').toggleClass('active');

  });

});

这是我的工作版本的链接。

需要注意以下几点：

1. 您不需要$(document).ready()多次调用。没有理由在单个页面上多次调用它，因为该事件仅被触发一次。

2. 你需要以某种方式跟踪状态；因此if ($('el').hasClass('classname'))语法。一旦处理得当，很容易确保在单击另一个元素时每个元素都“重置”到其原始状态。

希望有帮助！

Answer 3

toggleClass接受强制切换类型的第二个布尔参数，打开或关闭。不仅如此，您还可以使用单个 jQuery 调用来定位多个元素，因此请充分利用它，因为应用的类具有相同的名称。

所以你可以简化你的代码

$(document).ready(function() {

  $('.toggle-1').click(function() {

    $('.toggle-1, .toggle-1-content').toggleClass('active');

    $('.toggle-2, .toggle-2-content').toggleClass('active', false)

  })

  $('.toggle-2').click(function() {

    $('.toggle-2, .toggle-2-content').toggleClass('active');

    $('.toggle-1, .toggle-1-content').toggleClass('active', false)

  })

})

.container {

  width: 100%;

  height: 1000px;

  margin: 0 auto;

  background-color: #eee;

}

.wrapper {

  background-color: pink;

  position: relative;

  display: flex;

  align-items: center;

}

.toggle-1,

.toggle-2 {

  display: block;

  width: 20px;

  height: 20px;

  float: left;

  cursor: pointer;

  color: white;

  text-align: center;

  background-color: green;

  margin: 10px;

}

.toggle-1.active,

.toggle-2.active {

  background-color: red;

}

.toggle-1-content,

.toggle-2-content {

  display: none;

}

.toggle-1-content.active,

.toggle-2-content.active {

  display: block;

  background-color: white;

  border: 1px solid black;

  position: absolute;

  top: 40px;

}

.toggle-1-content.active {

  left: 0;

}

.toggle-2-content.active {

  left: 50px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="wrapper">

    <div class="toggle-1">1</div>

    <div class="toggle-1-content">

      <p>Some content 1</p>

    </div>

    <div class="toggle-2">2</div>

    <div class="toggle-2-content">

      <p>Some content 2</p>

    </div>

  </div>

</div>