javascript - 单击一个 div 时隐藏/显示并放大

Question

我有一个页面，其中有四个内容，每个内容都有一张图片。现在，我的任务是让内容变大当用户点击特定内容时带有图像。另外，我需要隐藏所有其他内容。

这是一个示例

这里每张图都很小，内容也被删减了。当用户点击图像时我需要隐藏所有其他内容以及我需要使点击的内容显示完整并使图像更大。像这样

为此，我正在做的是用一个类加载所有内容，并在单击时添加隐藏小内容和小图像并使其他更大的内容和图像可见。

此外，如果再次点击我需要再次显示所有带有图像的小内容。

现在我的问题是我必须在这里写下特定的 div id，这样它只会使特定的 id 变大。我怎样才能让它更通用？

编辑:添加代码

$($(this).find(".view-content")).click(function(){  

        if ( $( this ).hasClass( 'active' ) ) {
            $(this).removeClass('active');
                  $($(this).find(".Boardofadviser1")).show(); 
            $($(this).find(".Boardofadviser")).hide();

            $($(this).find(".views-row-3").show());



        }
        else
        {
           $(this).addClass('active');
           $($(this).find(".Boardofadviser1")).hide(); 
           $($(this).find(".Boardofadviser")).show();
            $($(this).find(".views-row-3").hide());
            $(".Boardofadviser1").nextAll().hide();
            $(".views-row-1.Boardofadviser1").hide();
           $(".views-row-1.Boardofadviser").show();

        }
         });

这是我的 HTML 页面，其中显示所有小内容，隐藏大内容

Answer 1

您可以使用 jQuery .toggle() 来显示/隐藏内容

$(document).ready(function(){
  $('.small').on('click', function(event) {
    $('.small').parent().toggle('show');
    $(this).parent().next('div').toggle('show');
  })
  $('.big').on('click', function(event) {
    $(this).parent().toggle('show');
    $('.small').parent().toggle('show');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <span>Adviser1</span>
      <p>Blah Blah Blah</p>
      <img src="img1.png" width="100px" height="100px" class="small">
    </div>
    <div style="display:none;">   
      <span>Adviser1</span>
      <p>Blah Blah Blah Blah Blah Blah</p>
      <img src="img1.png" width="200px" height="200px" class="big">
    </div>
  </div>
  <div>
    <div>
      <span>Adviser2</span>
      <p>Blah Blah Blah</p>
      <img src="img2.png" width="100px" height="100px" class="small">
    </div>
    <div style="display:none;">   
      <span>Adviser2</span>
      <p>Blah Blah Blah Blah Blah Blah</p>
      <img src="img2.png" width="200px" height="200px" class="big">
    </div>
  </div>
</div>

Codepen 示例:https://codepen.io/anon/pen/VbbBwg

希望这对您有所帮助!