Question

我有问题，我需要你的帮助。我有几个链接（在<aside>中），导致几个不同的菜单（在<section>中）。单击链接时，仅显示<section>中的相关div，其余部分将隐藏。这部分还可以，正常工作。什么是无效的是当我点击图像时：

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

所以，如果我点击＆＃34;第二个div＆＃34;内容，应该显示更大尺寸的相同图片（＆＃34;第二个div＆＃34;内容应该隐藏）当我再次点击大图时它应该消失并且＆＃34;第二个div＆＃34 ;要退回的内容。

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

我会真正展示你的支持 - 如何只显示隐藏的div，而不是所有隐藏的div。现在，当你点击大图时，它没有显示隐藏的div。

＆＃13;

$(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();
  });

});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

对于丑陋的草图和图片感到抱歉 - 它只是想知道它应该是什么样的......

Answer 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（包括当前元素）并找到所提供选择器的第一个匹配元素。在这种情况下，它会找到包含类menu的容器div。然后我们隐藏该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并删除完整尺寸的图像。

全部完成！

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

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

1 个答案: