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

Question

我在标题中有两个具有不同内容的切换（toggle-1 和 toggle-2）。我想阻止用户同时激活两个切换（否则它们会重叠）。

在下面的代码中，我尝试使用 if 语句来隐藏一个切换，如果另一个已经打开，但它不起作用。

理想情况下，我希望发生的是，如果 toggle-1 处于活动状态并且用户单击 toggle-2，则 toggle-1 将返回其原始状态，而 toggle-2 现在将处于活动状态。反过来也是一样。

我还不熟悉 JavaScript，如果您能告诉我我做错了什么以及应该如何做才能获得理想的结果，我将不胜感激

如果你觉得它更容易，这里是我的 CodePen 的链接：https ://codepen.io/fergos2/pen/NWWxgEp

var myToggle

var 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">&nbsp; <div class="wrapper">&nbsp; &nbsp; <div class="toggle-1">1</div>&nbsp; &nbsp; <div class="toggle-1-content">&nbsp; &nbsp; &nbsp; <p>Some content 1</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="toggle-2">2</div>&nbsp; &nbsp; <div class="toggle-2-content">&nbsp; &nbsp; &nbsp; <p>Some content 2</p>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

工作代码：$(document).ready(function() {&nbsp; $('.toggle-1').click(function() {&nbsp; &nbsp; if ($('.toggle-2').hasClass('active')) {&nbsp; &nbsp; &nbsp; // remove toggle-2 active classes&nbsp; &nbsp; &nbsp; $('.toggle-2').removeClass('active');&nbsp; &nbsp; &nbsp; $('.toggle-2-content').removeClass('active');&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.toggle-1').toggleClass('active');&nbsp; &nbsp; $('.toggle-1-content').toggleClass('active');&nbsp; });&nbsp;&nbsp;&nbsp; $('.toggle-2').click(function() {&nbsp; &nbsp; if ($('.toggle-1').hasClass('active')) {&nbsp; &nbsp; &nbsp; // remove toggle-1 active classes&nbsp; &nbsp; &nbsp; $('.toggle-1').removeClass('active');&nbsp; &nbsp; &nbsp; $('.toggle-1-content').removeClass('active');&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.toggle-2').toggleClass('active');&nbsp; &nbsp; $('.toggle-2-content').toggleClass('active');&nbsp; });});这是我的工作版本的链接。需要注意以下几点：您不需要$(document).ready()多次调用。没有理由在单个页面上多次调用它，因为该事件仅被触发一次。你需要以某种方式跟踪状态；因此if ($('el').hasClass('classname'))语法。一旦处理得当，很容易确保在单击另一个元素时每个元素都“重置”到其原始状态。希望有帮助！

Answer 3

toggleClass接受强制切换类型的第二个布尔参数，打开或关闭。不仅如此，您还可以使用单个 jQuery 调用来定位多个元素，因此请充分利用它，因为应用的类具有相同的名称。所以你可以简化你的代码$(document).ready(function() {&nbsp; $('.toggle-1').click(function() {&nbsp; &nbsp; $('.toggle-1, .toggle-1-content').toggleClass('active');&nbsp; &nbsp; $('.toggle-2, .toggle-2-content').toggleClass('active', false)&nbsp; })&nbsp; $('.toggle-2').click(function() {&nbsp; &nbsp; $('.toggle-2, .toggle-2-content').toggleClass('active');&nbsp; &nbsp; $('.toggle-1, .toggle-1-content').toggleClass('active', false)&nbsp; })}).container {&nbsp; width: 100%;&nbsp; height: 1000px;&nbsp; margin: 0 auto;&nbsp; background-color: #eee;}.wrapper {&nbsp; background-color: pink;&nbsp; position: relative;&nbsp; display: flex;&nbsp; align-items: center;}.toggle-1,.toggle-2 {&nbsp; display: block;&nbsp; width: 20px;&nbsp; height: 20px;&nbsp; float: left;&nbsp; cursor: pointer;&nbsp; color: white;&nbsp; text-align: center;&nbsp; background-color: green;&nbsp; margin: 10px;}.toggle-1.active,.toggle-2.active {&nbsp; background-color: red;}.toggle-1-content,.toggle-2-content {&nbsp; display: none;}.toggle-1-content.active,.toggle-2-content.active {&nbsp; display: block;&nbsp; background-color: white;&nbsp; border: 1px solid black;&nbsp; position: absolute;&nbsp; top: 40px;}.toggle-1-content.active {&nbsp; left: 0;}.toggle-2-content.active {&nbsp; left: 50px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="wrapper">&nbsp; &nbsp; <div class="toggle-1">1</div>&nbsp; &nbsp; <div class="toggle-1-content">&nbsp; &nbsp; &nbsp; <p>Some content 1</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="toggle-2">2</div>&nbsp; &nbsp; <div class="toggle-2-content">&nbsp; &nbsp; &nbsp; <p>Some content 2</p>&nbsp; &nbsp; </div>&nbsp; </div></div>