单击切换多个目标

Question

我有两张图片，当您单击其中一张时，文字（与图片相关）会滑入图片下方的视图中。目前closing/toggling文字的方法是再次点击图片。

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

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

感谢任何意见！

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>

单击切换多个目标

Click toggle with multiple targets

javascript

jquery

click

toggle

slidetoggle