使用 jQuery 切换元素的可见性

Question

我试图通过单击另一个元素来显示/隐藏一个元素。为简单起见，我将每个 div 称为 A、B、C 或 D，如图所示。我到目前为止的一个例子可以在这里查看：http://jsfiddle.net/Yh8Ar/1/。所以我有...

<div id="event">

    <div id="structure1">...</div>    // A
    <div class="structures">...</div> // B

    <div id="structure2">...</div>    // C
    <div class="structures">...</div> // D

    // more of these div pairs down here

</div>

...我希望功能是这样的，当我单击 div A 时，div B 在可见和隐藏之间切换（ show()/hide() ）...但是...我也想要 div B ，当可见时，当我单击窗口中的任何其他位置时隐藏，除了单击 div B 本身。另一个 div 对 (C,D) 也是如此……点击 C、D 切换并点击页面上的任意位置将隐藏 D。

这里的棘手部分是如果显示 div B 并且我单击 div C，我希望 div B 隐藏而 div D 显示。因此，单击页面上除 div B、D 之外的任何位置将恭敬地隐藏 div B、D。但我也希望能够通过反复单击 div A 来切换 div B 以及通过反复单击 div C 来切换 div D。一次只能显示一个 div。

感谢 Nick Craver，我目前拥有的 jQuery 是...

$(function() {

    $(document).click(function() {

        $('.structures').hide();
    });
    $('#fraction').click(function(event) {

        event.stopPropagation();
        $(this).next().toggle();
    });
    $('.structures').click(function(event) {

        event.stopPropagation();
    });
});

...但我不知道如何区分 div 对，意思是，我不知道如何在单击 div C 时隐藏 div B 并显示 div D。这是一个示例现在可以使用所有适当的代码：http://jsfiddle.net/Yh8Ar/1/

谢谢， 赫里斯托

Answer 1

您可以组合您的处理程序，但您也需要添加一个，如下所示：

$(function() {
  $(document).click(function() {
    $('#structures').hide();
  });
  $('#structure').click(function(event) {
    event.stopPropagation();
    $('#structures').show();
  });
  $('#structures').click(function(event) {
    event.stopPropagation();
  });
});

这也在#structures div 本身内部单击时停止事件传播（以及单击处理程序已经停止隐藏按钮本身）you can test it here。

如果您想让按钮改为切换按钮，请将 .show() 更改为 .toggle()。

Answer 2

几件事：

将相关的 div 分组到一个容器中可能会很有用：

<div id="container-1" class="container">
  <div class="structure_handle">...</div>   // A
  <div class="structure_content">...</div>  // B
</div>

<div id="container-2" class="container">
  <div class="structure_handle">...</div>   // C
  <div class="structure_content">...</div>  // D
</div>

通过这种方式，您可以使独特的事物保持独特（使用id）和一般事物（使用class）。这将帮助您处理 jQuery 事件。这是一个简单的例子（未经测试）：

$(function() {
   $(document).click(function() {
      $('.structure_content').hide(); // hide everything
   });
   $('.container .structure_content').click(function(event) {
      event.stopPropagation(); // don't bubble up clicks
   });
   $('.container .structure_handle').click(function() {
      $('.structure_content').hide(); // hide all other content first
      $(this).siblings('.structure_content').show(); // show only this one
   });
});

.siblings 调用是为什么将 div 分组很有用的原因，因为它将搜索空间限制为仅分组的内容。

实际上，使用自定义事件可能会更简洁，而不是尝试将所有内容都放入标准的点击处理程序中。查看bind 和trigger jQuery 文档。