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

Question

我有问题需要你的帮助。我有几个 link（在 <aside> 中）导致几个不同的菜单（在 <section> 中）。单击 link，仅显示 <section> 中的相关 div，其余均隐藏。这部分没问题并且可以工作。当我点击图像时不起作用：

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

因此，如果我点击 "second div" 内容上的图片，应该显示尺寸更大的相同图片（应该隐藏 "second div" 内容），当我再次点击大图它应该消失并且 "second 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>

对不起，丑陋的素描和图片 - 只是想知道它应该是什么样子....

Answer 1

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

这里有一个 fiddle 给你：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 和 class menu 的容器。然后我们隐藏 div 并将对它的引用保存在变量中。

接下来，我们创建一个full-sized版本的图片并为其分配一些属性：

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 并删除 full-sized 图像。

全部完成！

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

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

How to simultaneously hide and show content and vice versa?

javascript

jquery

toggle

show-hide