使用 jQuery 切换元素的可见性

Question

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

<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，I希望 div B 隐藏，div D 显示。因此，单击页面上除 div B、D 之外的任何位置都会隐藏 div B、D。但我还希望能够通过重复单击 div A 来切换 div B，以及通过重复单击 div C 来切换 div D。一次只能显示一个 div。

到目前为止，我拥有的 jQuery，感谢 Nick Craver，是……

$(function() {

    $(document).click(function() {

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

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

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

但我无法弄清楚如何区分 div 对，也就是说，我无法弄清楚如何隐藏 div B 和显示 div D 单击 div C 时。以下是它现在如何工作的示例以及所有相应的代码： 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();
  });
});

当单击 #structs div 本身（以及单击处理程序已经停止按钮本身的隐藏），您可以在此处测试。

如果您想让按钮成为切换按钮，请更改 .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 和 触发 jQuery 文档。