代码之家 › 专栏 › 技术社区 › Hristo

使用jquery切换元素的可见性

show-hide toggle jquery

Hristo · 技术社区 · 14 年前

我试图通过单击另一个元素来显示/隐藏一个元素。为了简单起见,我将把每个分区称为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显示。所以,点击页面上除了b,d以外的任何地方都会相应地隐藏b,d。但我也希望能够通过反复点击DIV A来切换DIV B,以及通过反复点击DIV C来切换DIV D。一次只能显示一个DIV。

到目前为止,感谢尼克·克雷弗,我的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/

谢谢, 希斯托

2 回复 | 直到 14 年前

Nick Craver 14 年前

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

$(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() .

markquezada 14 年前

两件事:

将相关的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 Call是将Div分组的原因,因为它将搜索空间仅限于分组的内容。

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