Нажмите для переключения с несколькими целями - PullRequest
Новая
       38

Нажмите для переключения с несколькими целями

0 голосов
/ 08 октября 2018

У меня есть два изображения, и когда вы нажимаете на одно, текст (соответствующий изображению) скользит в поле зрения под изображением.В настоящее время метод закрытия / переключения текста заключается в повторном нажатии на изображение.

Если я нажимаю на второе изображение, когда текст на первом изображении все еще виден, текст закрывается.Затем мне нужно снова щелкнуть второе изображение, чтобы увидеть его текстовое содержимое.

Я хотел бы иметь возможность щелкнуть второе изображение, и либо текстовое содержимое просто поменяется местами, либо оно закроет текст дляпервое изображение и открывает текст для второго изображения (всего одним кликом, а не двумя).

Любой вклад приветствуется!

У меня есть скрипка здесь

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;
}

1 Ответ

0 голосов
/ 08 октября 2018

Пожалуйста, проверьте этот ответ,

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>
...