javascript - 单击切换多个目标

Question

我有两张图片，当您单击其中一张时，文本(与图片相关)会滑入图片下方的 View 中。目前关闭/切换文本的方法是再次点击图像。

如果我在第一张图片上的文本仍然可见时单击第二张图片，它会关闭文本。然后我必须再次点击第二张图片才能看到它的文本内容。

我希望能够单击第二张图片，文本内容只是交换，或者关闭第一张图片的文本并打开第二张图片的文本(只需单击一次，而不是两次)。

感谢任何意见!

我有一个 fiddle here

JS:

    var teamMember = document.getElementsByClassName("team-member");
    var teamRow = document.getElementsByClassName("team-row");
    var bioContainer = $( "<div class='container' id='bio-container'></div>" );

    $(bioContainer).hide();


    $(teamMember).click(function() {

        $(this).toggleClass('member-selected');     

        $('.team-grid').toggleClass('member-active');

        $(bioContainer).html("");

        var thisBio = $(this).find(".team-bio");

        var thisRow = $(this).parent(teamRow);

        $(thisRow).after(bioContainer); 

        var bioHTML = $(thisBio).html();

        $height = $(thisBio).outerHeight(true)

        $(bioContainer).css('height', $height);

        $(bioContainer).slideToggle( "slow", function() {       
            $(this).html(bioHTML);
        });  
    });

HTML:

<section class="team-grid"> 

  <div class="team-row">

      <div class="col-sm-6 team-member">
          <img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
             JOHN'S Bio
            </div>
          </div>
      </div>

      <div class="col-sm-6 team-member">
          <img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
               SALLY'S Bio
            </div>
          </div>
      </div>

  </div>

</section>

CSS:

.col-sm-6 {
  width:50%;
  float:left;
}
img {
  width:100%;
  height:200px;
  object-fit:cover;
  cursor:pointer;
}
.close-bio {
  color:pink;
  font-weight:bold;
}
.team-bio {
    visibility: hidden;
    padding: 80px 20%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#bio-container {
    background: #666;
    width: 100%;
    max-width: none;
    position: relative;
    float: left;
    padding: 25px;
    color:#fff;
    font-size:20px;
}

Answer 1

请检查这个答案，

Js Fiddle

	var teamMember = document.getElementsByClassName("team-member");
	var teamRow = document.getElementsByClassName("team-row");
	var bioContainer = $( "<div class='container' id='bio-container'></div>" );
  var bioContainerExpanded = false;

	$(bioContainer).hide();
  
			
	$(teamMember).click(function() {
  	if(bioContainerExpanded){
        $(bioContainer).slideToggle( "slow", function() {});
    		bioContainerExpanded = false;
    }

		$('.team-grid').toggleClass('member-active');

		// Resets bioContainer html to blank
		$(bioContainer).html("");

		$(this).toggleClass('member-selected');		
		// Assign 'this' team bio to variable
		var thisBio = $(this).find(".team-bio");

		// Assign 'this' row to variable (find teamRow parent of this teamMember)
		var thisRow = $(this).parent(teamRow);
    
    // Place bio after row
    $(thisRow).after(bioContainer);	
    
		// Assign 'this' bio html to variable
		var bioHTML = $(thisBio).html();

		// Dynamically calculte height of the bio including padding
		$height = $(thisBio).outerHeight(true)

		//assign height to bioContainer before the toggle so that it slides smoothly
		$(bioContainer).css('height', $height);

		// Slide toggle the bioContainer
		$(bioContainer).slideToggle( "slow", function() {		
			// Insert bioHTML into 'this' bioContainer
			$(this).html(bioHTML);
		});
   bioContainerExpanded = true;

	});

.col-sm-6 {
  width:50%;
  float:left;
}
img {
  width:100%;
  height:200px;
  object-fit:cover;
  cursor:pointer;
}
.close-bio {
  color:pink;
  font-weight:bold;
}
.team-bio {
    visibility: hidden;
    padding: 80px 20%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#bio-container {
    background: #666;
    width: 100%;
    max-width: none;
    position: relative;
    float: left;
    padding: 25px;
    color:#fff;
    font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="team-grid"> 

  <div class="team-row">

      <div class="col-sm-6 team-member">
          <img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
             JOHN'S Bio
            </div>
          </div>
      </div>

      <div class="col-sm-6 team-member">
          <img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
          <div class="team-bio">
            <div class="team-bio-inner">
               SALLY'S Bio
            </div>
          </div>
      </div>

  </div>

</section>