如何同时隐藏和显示内容，反之亦然？答案

【问题标题】：How to simultaneously hide and show content and vice versa?如何同时隐藏和显示内容，反之亦然？
【发布时间】：2016-01-19 16:43:33
【问题描述】：

我有一个问题，我需要你的帮助。我有几个链接（<aside>）指向几个不同的菜单（<section>）。单击链接时，仅显示 <section> 中的相关 div，其余部分被隐藏。这部分没问题，可以正常工作。当我单击图像时不起作用：

<section> 中的当前 div (.menu) 应该被隐藏；
应该显示相同的图片（尺寸更大）；
当您再次单击大图像时，大图像应该会消失，.menu（在第一步中隐藏的那个）中的当前 div 应该再出现一次。内容之间的切换。

因此，如果我单击“第二个 div”内容上的图片，则应显示更大尺寸的相同图片（应隐藏“第二个 div”内容），当我再次单击大图片时，它应该消失并返回“第二个div”内容。

我尝试使用toggle()，但没有成功。要么我没有正确使用它，要么它不适合我的情况。这是我设法到达的地方。

非常感谢您的支持 - 如何仅显示隐藏的 div，而不是所有隐藏的 div。现在，当你点击大图时，它并没有显示隐藏的 div。

$(window).on("load", function() {
  $("div.menu:first-child").show();
});

$(".nav a").on("click", function() {
  $("div.menu").fadeOut(30);

  var targetDiv = $(this).attr("data-rel");
  setTimeout(function() {
    $("#" + targetDiv).fadeIn(30);
  }, 30);
});

var pictures = $(".img-1, .img-2").on("click", function() {
  $("div.menu:active").addClass("hidden");

  //how to reach out only the current, active div (not all div's in .menu)?

  $(".menu").hide();
  var par = $("section")
    .prepend("<div></div>")
    .append("<img id='pic' src='" + this.src + "'>");

  var removePictures = $("#pic").on("click", function() {
    $(this).hide();
    $(".hidden").show();
  });

});

.menu {
  width: 100%;
  display: none;
}
.menu:first-child {
  display: block;
}
.row {
  display: inline-block;
  width: 100%;
}
.img-1,
.img-2 {
  width: 120px;
  height: auto;
}

<!doctype html>
<html>

<head>
</head>

<body>
  <aside>
    <ul class="nav">
      <li><a href="#content1" data-rel="content1">To first div</a>
      </li>
      <li><a href="#content2" data-rel="content2">To second div</a>
      </li>
      <li><a href="#content3" data-rel="content3">To third div</a>
      </li>
    </ul>
  </aside>
  <section>
    <div class="menu" id="content1">
      <h3>First Div</h3>
      <div class="present">

        <div class="row">
          <div>
            <p>Blah-blah-blah. This is the first div.</p>
            <img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
          </div>
        </div>

        <div class="row">
          <div>
            <img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
            <p>Blah-blah-blah. This is the first div.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="menu" id="content2">
      <h3>Second Div</h3>
      <div class="present">

        <div class="row">
          <div>
            <p>
              Blah-blah-blah. This is the second div.
            </p>
            <img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
          </div>
        </div>

        <div class="row">
          <div>
            <img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
            <p>
              Blah-blah-blah. Yjis is the second div.
            </p>
          </div>
        </div>

      </div>
    </div>

    <div class="menu" id="content3">
      <h3>Third Div</h3>
      <div class="present">

        <div class="row">
          <div>
            <p>
              Blah-blah-blah. This is the third div.
            </p>
            <img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
          </div>
        </div>

        <div class="row">
          <div>
            <img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
            <p>
              Blah-blah-blah. This is the third div.
            </p>
          </div>
        </div>

      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</body>

</html>

对不起，丑陋的草图和图片 - 这只是为了了解它应该是什么样子......

【问题讨论】：

在 jQuery 事件处理程序中 ...this 是作用于的元素。想和父母做点什么...$(this).parent().doSomething() 或$(this).parent().find('.someClass').doSomething()。通读 API 了解所有遍历方式...每个方法都有示例
我已经阅读了很多文档并尝试了很多很多东西。如果我设法做了我想做的事，我就不会问我是怎么做的以及我错过了什么。我需要书面决定，而不是“去那里阅读”的建议。我已经读过了，但对我没有帮助......
很抱歉试图提供帮助。你需要从$(this)开始
对不起，如果我听起来很粗鲁。我真的很生气这个不起作用的功能，真的不知道如何解决它。
主要的主要问题是：如何只获取活动的 div，将其隐藏，然后再次使其处于活动状态（其余部分应继续隐藏）？从 $(this) 开始是什么意思？

标签： javascript jquery toggle show-hide

【解决方案1】：

一般来说，在 Stack Overflow 上询问如何为特定行为编写代码是一种糟糕的形式。但是，这需要对您正在使用的库以及您想要实现的目标有所了解。希望我的回答能帮助您在未来更好地表达和形成您的问题。

这是给你的小提琴：https://jsfiddle.net/hwd4b0ag/

特别是，我修改了你的最后一次点击监听器：

var pictures = $(".img-1, .img-2").on("click", function() {
  var parentDiv = $(this).closest('div.menu').hide();

  var blownUpPic = $("<img>").attr({
  id: 'pic',
  src: this.src,
  'data-parent': parentDiv.attr('id')
  })
  .appendTo("section")
  .on('click', function() {
    $('#' + $(this).attr('data-parent')).show();
    $(this).remove();
  });
});

现在，让我们回顾一下吧！

首先，

var parentDiv = $(this).closest('div.menu').hide();

在 jQuery 侦听器中，this 变量存储作为事件侦听器接收者的当前 javascript DOM 元素。在您的情况下，它指的是与 ".img-1, .img-2" 匹配的元素。

.closest(selector) 将向上遍历 DOM（包括当前元素）并找到提供的选择器的第一个匹配元素。在这种情况下，它会找到您的容器 div，其类为 menu。然后我们隐藏那个 div 并将对它的引用保存在一个变量中。

接下来，我们创建一张图片的全尺寸版本并为其分配一些属性：

var blownUpPic = $("<img>").attr({
  id: 'pic',
  src: this.src,
  'data-parent': parentDiv.attr('id')
  })

我们将data-parent 属性设置为容器div 的id，因此我们有一个稍后会返回它的引用。

然后我们将图像添加到 DOM：

.appendTo("section")

并为其声明一个新的点击监听器：

.on('click', function() {
    $('#' + $(this).attr('data-parent')).show();
    $(this).remove();
  });

对于$(this).attr('data-parent')，我们使用对我们之前分配的容器div 的引用，然后通过其id 检索该元素。我们取消隐藏容器 div 并移除全尺寸图像。

全部完成！

有更好的编码方法，但我认为这对你来说是一个很好的下一步，类似于你当前的代码。

【讨论】：

凯文，非常感谢您的回答。正如您可能看到的，我是新手，仍然没有足够的知识如何让事情正常工作。你是对的，我没有很好的理解，但有一天，我强烈希望，我会的。很抱歉以不恰当的方式提问（这是我在这里的第一个问题），所以仍然需要更多经验。尽管如此，看到一个书面的（工作的）代码并解释了正在做什么，这对我来说非常有帮助。现在我有一个很好的基础可以跨过去回顾一下。再次感谢您花时间编写和解释 :)