Question

我已经阅读了很多类似的问题，但我找不到答案...... 使用以下代码，我可以打开和关闭我的图表：

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6>
  <div id="Chartspace3" class="toggle-container"></div>

我想要做的是当点击“图表3”时，下面的两个div显示如下：

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6>
  <div id="PassOptionSelection"  style="display: none; margin-top: 20px"> </div>
  <div id="Chartspace3" class="toggle-container"></div>

但似乎只有一个div可以被“toggle-trigger”链接切换......

这是我的JS：

$(".toggle-container").hide(); 
$(".toggle-trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
});

[编辑]

这是我的html的更大样本：

<h6 class="toggle-trigger"><a href="#">Nombre d'Appels par Passerelle</a></h6>
<div class="toggle-container" id="Chartspace1" style="width: 800px; height: 300px; margin-bottom: 10px"></div>

<h6 class="toggle-trigger"><a href="#">Pourcentage d'Appels par Utilisation de Passerelle</a></h6>
 <div class="toggle-container" id="Chartspace2" style="width: 800px; height: 300px; margin-bottom: 10px"></div>

<h6 class="toggle-trigger"><a href="#">Classification des appels par types</a></h6>
<div id="PassOptionSelection"  style="display: none; margin-top: 20px"> </div>
<div id="Chartspace3" class="toggle-container"  style="width: 800px; height: 800px; margin-bottom: 10px;"></div>

除了只有表格会在第三个切换链接上显示的部分，图表保持隐藏...

Answer 1

怎么样？

<击> $（ “切换触发”）。点击（函数（）{ $（本）.toggleClass（ “活动”）的孩子（ “格”）的slideToggle（ “慢”）。返回false; }）;

抱歉......脑屁... DIV标签不是H6标签的子项。我道歉......我应该更仔细地查看你的示例代码。

$(".toggle-trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow").next().slideToggle("slow");
    return false;
});

可能有用，但很难看。我认为Jemaclus关于将两个DIV元素封装在容器DIV中的建议是更清洁/更好的解决方案。

Answer 2

最简单的方法是将所有想要显示的内容包装在div中，然后隐藏并显示该div，而不是隐藏和显示各个div。

  <div id="trigger">Trigger</div>
  <div id="container">
      <div id="box1">Box 1</div>
      <div id="box2">Box 2</div>
  </div>

然后你可以隐藏或显示#container框，它也会隐藏/显示方框1和方框2。

另一个简单的选择是将一个类添加到要切换的div（即切换 - 这个），然后执行以下操作：

  $(".toggle-trigger").click(function() {
    $('.toggle-this').toggle();
    return false;
  });

另一种方式（尽管我更喜欢它，因为它更容易打破）就是获得接下来的两个div：

   $(".toggle-trigger").click(function() {
    $(this).next('div').toggle().next('div').toggle();
    return false;
  });

在我看来，这个坏主意的原因是，如果你要添加或删除其他div，它会破坏并隐藏你不想隐藏的div。

最后，最精确的解决方案是根据ID显式隐藏/显示这些div，如下所示：

 $(".toggle-trigger").click(function() {
    $('#PassOptionSelection').toggle();
    $('#Chartspace3').toggle();
    return false;
  });

我怀疑最后一个不是一个选项，因为你可能在页面上有多个图表，各种ID。

我的建议是选择我的前两个选项之一。

祝你好运。

Answer 3

我有点困惑，但是如果我理解你正确的你要显示的div不是一个没有被点击的.toggle-trigger的孩子。这就是为什么next（）会工作，但.find（'div'）不会。此外，它可能不是你元素的直接兄弟。你可以使用像

这样的东西

$(this).toggleClass('active').next('.toggle-container').slideToggle('slow');

Javascript Jquery一个触发器来切换多个div

3 个答案: