Question

我需要帮助来实现我仅用于学习目的的想法。

我想点击图片，以100％宽度打开它，右边我会打开图像描述并隐藏其他位于div“内容”内的人。

当然，在我再次点击图像后，我会回到之前的布局。

我正在尝试，但我真的不知道如何实施。

$(function() {

  $(".frame").on("click", function() {

    $(this).addClass('expanded');
    $(this, ".information").css('display', "inline");

    if ($(this).hasClass("expanded")) {
      $(this).css('width', "100%");

    } else {

      $(".frame").css("visibility", "hidden");

    }
  });
});

.content {
  width: 100%;
  margin: 0;
  top: 0;
}
.frame {
  width: 20%;
  float: left;
  overflow: hidden;
}
.information {
  float: right;
  visibility: hidden;
}
.image {
  border: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="frame">
    <div class="image">
      <img src="http://www.sowhowins.com/Character%20Pictures/He-Man2.png" alt="Test" />
      <div class="information">
        This is He-man
      </div>
    </div>


  </div>
  <div class="frame">
    <div class="image">
      <img src="http://images.amazon.com/images/G/01/dvd/aplus/transformers/transformers8-hi.jpg" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="http://images6.fanpop.com/image/photos/36900000/Bumblebee-the-transformers-36906761-1000-1286.jpg" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="http://media.popcultcha.com.au/media/catalog/product/s/i/sid26121.png" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="https://www.sideshowtoy.com/wp-content/uploads/2013/07/1000041-product-silo.png" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>
  </div>
</div>

Answer 1

您最好使用.hover()功能。这很容易。

$(function() {

  $(".frame").hover( function() {
      $(".frame").hide();
      $(this).show();
      $(this).addClass("expanded");
  },function(){
      $(".frame").show();
      $(this).removeClass("expanded");
  });
});

以下是Demo

Answer 2

通过调整CSS中的以下内容

> x
      projsizes   
 [1,]      2865  2
 [2,]      2737  2
 [3,]       802  2
 [4,]      2738  5
 [5,]      3384  4
 [6,]      3432  2
 [7,]      2333  2
 [8,]      1713  1
 [9,]      2893  6
[10,]      1010  1
[11,]      1735  3
[12,]      1961  1
[13,]      2534  5
[14,]      2117  4
[15,]      3086  8
[16,]      4784  7
[17,]      2185  1
[18,]       966  2
[19,]      4170  3
[20,]      4958  5
[21,]       383  1
[22,]      2926  2
[23,]      2733  1
[24,]      1478  5
[25,]      2702 17
[26,]      4628  6
[27,]      1207  2
[28,]      4118  2
[29,]      1737  1
[30,]      3157  1
[31,]      2051  1
[32,]       927  1
[33,]      2047  1
[34,]      4452  4
[35,]      1784  2
[36,]      4110  2
[37,]      4406 14
[38,]       861  3
[39,]       875  4
[40,]      3310  5
[41,]      3133  5
[42,]      4290  5
[43,]      4615  8
[44,]      1661  1
[45,]      4479  5
[46,]      3752  2
[47,]      3739  9
[48,]      1139  1
[49,]      4177  5
[50,]      1707  2
[51,]      1447  3
[52,]      1028  1
[53,]      3504  4
[54,]      4093 15
[55,]      3689  6
[56,]      2821  4
[57,]      3326  1
[58,]      3111  7
[59,]       906 10
[60,]      4602  2

你可以稍微清理你的代码，然后只是.hide（）所有内容，特别是显示点击的.frame

.frame.expanded{
    width:100%;
}
.information {
  float: right;
  display:none;
}
.frame.expanded .information{
    display:block;
}

小提琴： http://jsfiddle.net/trex005/9w0qe47g/1/

显示包含详细信息的图片并隐藏

2 个答案: