Question

我是jQuery的新手并且正在努力使用.toggle()功能。

我想在同一位置显示多个<div> - 元素......但当时只有一个。{如果一个<div>被打开而另一个被“切换”，它将自动关闭。 HTML：

$(document).ready(function() {
  $("#button1").click(function() {
    $("#box1").toggle(1000);
  });
});
$(document).ready(function() {
  $("#button2").click(function() {
    $("#box2").toggle(1000);
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class=box1 id=box1>
    This is Box 1
  </div>

  <div class=box2 id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="button1">Box1</a>
<a href="#" id="button2">Box2</a>

另外，我很确定我只需要一个toggle()函数，而不是我想要实现的任务4 ...但是尝试调用同一个函数似乎不适用于我的不同{{ 1}} / id。我在做错了什么/在这里失踪了？

Answer 1

通常，您可以使用单个文档就绪功能。

在这种情况下，您还可以使用单个click函数来处理切换。由于您使用的是触发链接，因此您需要一种方法来引用目标框，但是这样的方法可以使用其他属性来获取框名称。（您也可以使用索引来执行此操作，但为了便于使用，我添加了一个target-box属性，其中包含所需框的ID。）

我还为两个div添加了相同的box类，您可以删除单个box1/box2类，因为您已经拥有处理差异的ID。

我还在链接中添加了一个toggle类，为它们提供了更多的语义选择器，并删除了不必要的“打开/关闭”重复项（因为toggle旨在处理两者）

jQuery(document).ready(function($){
  $('.toggle').on('click', function(){
    var targetBox = $(this).attr('target-box'); // Find the target box
    
    $('.box').not(targetBox).hide(1000); // Hide all other boxes
    
    $(targetBox).toggle(1000); // Toggle the current state of this one
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id="box1">
    This is Box 1
  </div>

  <div class="box box2" id="box2">
    This is Box 2
  </div>
</div>

<a href="#" class="toggle" target-box="#box1">Toggle Box1</a>
<a href="#" class="toggle" target-box="#box2">Toggle Box2</a>

Answer 2

这样的事可能对你有所帮助。您可以隐藏以某种方式标记的所有元素，例如一个类的所有元素。在这个片段中，我将类“box”添加到所有框中，在打开时，我首先以这种方式隐藏所有框，然后显示指定的框。

现在单击“打开”将打开指定的框并关闭其他框，单击“关闭”将关闭指定的框。

$(document).ready(function() {
  $("#button1").click(function() {
    $(".box").hide(1000);
    $("#box1").show(1000);
  });
  $("#buttonclose").click(function() {
    $("#box1").hide(1000);
  });
  $("#button2").click(function() {
    $(".box").hide(1000);
    $("#box2").show(1000);
  });
  $("#buttonclose2").click(function() {
    $("#box2").hide(1000);
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id=box1>
    This is Box 1
  </div>

  <div class="box box2" id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="buttonclose">Close Box1</a>
<a href="#" id="buttonclose2">Close Box2</a>

<a href="#" id="button1">Open Box1</a>
<a href="#" id="button2">Open Box2</a>

在同一位置只切换一个div元素（隐藏所有其他div）

2 个答案: