0

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

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

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

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

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

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>

4

4 回答 4

1

几个问题。

请研究下面的代码

  • 太多 $(document.ready... 并且不需要存储这样一个语句的结果
  • 使用数据属性和通用类可以大大缩短代码。DRY 不要重复自己
  • 我也简化了内容容器 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>

于 2019-10-12T18:28:03.887 回答
0

工作代码： 

$(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'))语法。一旦处理得当，就很容易确保每个元素在单击另一个元素时都“重置”到其原始状态。

希望有帮助！

于 2019-10-12T18:13:44.620 回答
0

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>

于 2019-10-12T18:18:26.297 回答
-1

您可以使用方法“removeClass”从另一个切换中删除活动类

var oneToggle = $(document).ready(function() {
    $(".toggle-1").click(function() {
        $(".toggle-1").toggleClass("active")
        $(".toggle-1-content").toggleClass("active")
        $(".toggle-2").removeClass("active")
        $(".toggle-2-content").removeClass("active")
    })
})

var twoToggle = $(document).ready(function() {
    $(".toggle-2").click(function() {
        $(".toggle-1").removeClass("active")
        $(".toggle-1-content").removeClass("active")
        $(".toggle-2").toggleClass("active")
        $(".toggle-2-content").toggleClass("active")
    })
})
于 2019-10-12T18:19:49.660 回答