文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >单击时显示和隐藏图像

问单击时显示和隐藏图像
EN

Stack Overflow用户
提问于 2017-04-05 07:45:32
回答 2查看 122关注 0票数 1

我试图显示一个图像时，它的缩略图被点击。

下面是我现在的代码：

​

代码语言：javascript
复制
$('.theme-preview').click(function() {

  console.log("fired");
  var previewPopup = $(this).children('.popup-preview');
  previewPopup.fadeIn("slow");

  previewPopup
    .css("position", "fixed")
    .css("top", ($(window).height() / 2) - ($(this).children('.popup-preview').outerHeight() / 2))
    .css("left", ($(window).width() / 2) - ($(this).children('.popup-preview').outerWidth() / 2));


  return false;

});

$('html').click(function() {
    $('.popup-preview').hide();
      return false;
 });
代码语言：javascript
复制
.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  display: none;
}

.col-md-6 {
  float: left;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

当点击任何缩略图时，图像都会显示出来。如果点击外部，它就会隐藏起来。

我想补充的是：

  • 当我单击父类(例如缩略图#1)并显示较大的图像时，我想在再次单击父类(例如缩略图#1)时隐藏大图像。以及其他缩略图。
  • 然后，当我点击缩略图#1并显示较大的图像，然后单击缩略图#2，则缩略图#1的大图像将隐藏，而较大的缩略图#2将显示。其他缩略图也一样。

注意:当一个大的图像被点击(本身)，它不应该被隐藏。

javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-05 07:52:46

你可以试试这样的东西：

逻辑：

  • 单击时，检查要显示的缩略图是否可见/
  • 如果是，把它藏起来。
  • 如果没有，则隐藏任何其他缩略图并显示当前缩略图。

​

代码语言：javascript
复制
$('.theme-preview').click(function() {

  var previewPopup = $(this).children('.popup-preview');
  if (previewPopup.is(":visible"))
    previewPopup.fadeOut("slow");
  else {
    $('.popup-preview:visible').fadeOut();
    previewPopup.fadeIn("slow");

    previewPopup
      .css({
        "position": "fixed",
        "top": ($(window).height() / 2) - (previewPopup.outerHeight() / 2),
        "left": ($(window).width() / 2) - (previewPopup.outerWidth() / 2)
      })
  }
  return false;
});

$('html').click(function() {
  $('.popup-preview').hide();
  return false;
});

$('.popup-preview').on("click", function(e){
  e.stopPropagation()
})
代码语言：javascript
复制
.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  display: none;
}

.col-md-6 {
  float: left;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2017-04-05 07:56:34

首先，您需要检查弹出是否可见，如果用户单击其thumbnail.If no，则将其隐藏，如果弹出可见，用户单击其他弹出，则隐藏任何open.And弹出，仍然关闭任何可见的弹出并显示相应的弹出。

​

代码语言：javascript
复制
$('.theme-preview').click(function() {

  if($(this).children('.popup-preview').is(':visible')){
    $(this).children('.popup-preview').hide();
  }
  else{
    $('.popup-preview').hide();
  var previewPopup = $(this).children('.popup-preview');
  previewPopup.fadeIn();
   previewPopup
    .css("position", "fixed")
    .css("top", ($(window).height() / 2) - ($(this).children('.popup-preview').outerHeight() / 2))
    .css("left", ($(window).width() / 2) - ($(this).children('.popup-preview').outerWidth() / 2));
  }
  
 


  return false;

});

$('html').click(function() {
    $('.popup-preview').hide();
      return false;
 });
代码语言：javascript
复制
.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  display: none;
}

.col-md-6 {
  float: left;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43224949

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档