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

Question

我有两个开关(切换-1和切换-2)与不同的内容在一个标题。我希望防止用户同时激活两个切换(否则它们会重叠)。

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

理想情况下，我想要发生的是，如果切换-1是活动的，用户点击切换-2，那么切换-1将恢复到原来的状态，切换-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();
}

.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>

​

Answer 1

工作代码：

$(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 2

几个问题。

请学习下面的代码

• 太多的美元(document.ready.也不需要存储这样一份声明的结果
• 使用数据属性和公共类可以大大缩短代码。干别重复
• 我也简化了内容容器CSS。

​

$(function() { // on page load
  $('.toggle').on("click", function() { // any of the toggles
    const $wrapper = $(this).closest(".wrapper");
    const id = $(this).data("id");

    $(this).toggleClass('active');      // toggle clicked div 
    const show = $(this).is(".active"); // is it active after we toggled?

    $wrapper
      .find(".toggle")        // find all toggles
      .not(this)              // exclude the one we clicked
      .removeClass("active"); // remove class

    $wrapper.find(".content").hide(); // hide any content divs

    $("#" + id).toggle(show); // show the one belonging to the clicked toggle
  })
})

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.active {
  background-color: red;
}

.content {
  display: none;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
}

#div1 {
  left: 0;
}

#div2 {
  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" data-id="div1">1</div>
    <div id="div1" class="content">
      <p>Some content 1</p>
    </div>

    <div class="toggle" data-id="div2">2</div>
    <div id="div2" class="content">
      <p>Some content 2</p>
    </div>
  </div>
</div>

​

Answer 3

toggleClass接受第二个布尔参数，该参数强制切换类型为on或off。不仅如此，您还可以使用单个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>

​