Аккордеон на свитке с использованием jQuery - PullRequest
Новая
       9

Аккордеон на свитке с использованием jQuery

0 голосов
/ 12 июня 2018

Я работаю с аккордеонными вкладками.На клике работает нормально.Теперь я хочу добавить больше функциональности.Я хочу по прокрутке эти вкладки должны быть открыты / изменены после завершения всех пяти вкладок, а затем перейти к следующему разделу с помощью jQuery.Я пытался использовать scrollTo, но не достиг этого. 

$(document).ready(function() {

  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
});
.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

Ответы [ 2 ]

0 голосов
/ 17 июня 2018

Я изменил вашу функциональность JS: после того, как все открытые вкладки завершены, перейдите к следующему разделу

Решения:

дополнительный класс view-complete включен вactive Список вкладок в HTML

<li class="active view-complete"></li> для подтверждения завершения просмотра открытой вкладки. 

$(document).ready(function() {

    $("#tabs li").on('click', function() {
        if ($(this).hasClass("active")) {
            return false;
        }

        $("#tabs li").removeClass("active");
        $(this).addClass("active view-complete");

        var nthChild = $(this).index() + 1;

        $("#content-tab div").removeClass("active");
        $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");

        if ($("#tabs li").length === $('.view-complete').length) {
            $('html, body').animate({
                scrollTop: $(".block").offset().top
            }, 1000, function() {
               console.log('You have open all tabs completed - !done');
               $("#tabs li").removeClass("view-complete");
               $("#tabs li:nth-child(" + nthChild + ")").addClass("view-complete");
            });
        }
    });

});
.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active view-complete"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

Полезно:)

0 голосов
/ 14 июня 2018

Судя по вашим новым комментариям, я понимаю, что понимаю.что вам нужно сделать, это проверить прокрутку, если позиция прокрутки больше, чем высота div обертки.Если это так, то измените классы на активные.См. Ниже: 

<div class="wrapper" id="wrapper">

.... 

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
  $(window).scroll(function(e) {
    var bodyRect = window.document.body.getBoundingClientRect();
    var wrapperRect = window.document.getElementById("wrapper").getBoundingClientRect();
    var bodyScrollPos = (bodyRect.top * -1);

    if(bodyScrollPos >= wrapperRect.height) {
        $("#content-tab>div").addClass("active");
      $("ul#tabs li").addClass("active");
    }
  });
});

Вот скрипка

...