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 C来切换div D来切换div B.一次只能显示一个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 C时显示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文档。

使用jQuery切换元素的可见性

2 个答案: