Плавное скольжение вверх и вниз по контенту при нажатии на вкладку

Question

Плавное скольжение вверх и вниз по контенту при нажатии на вкладку

0

HTML

          <div class="accordion">
            <div id="step-1">
             <a href="#step-1" class="tab">Step 1 - Information</a>
              <div class="content">
                <div style="background: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                </div>
              </div>
            </div>
            <div id="step-2">
              <a href="#step-2">Step 2 - Select</a>
              <div class="content">
                <div style="background: green;">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                  </div>
                </div>
                </div>
          </div>
        </div>

CSS

    .accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
}

.accordion > div:target {
  height: 300px;
}

JS

 $('.accordion .tab').on('click', function(event) {
        var parent_tab = $(this).parent();
        if (parent_tab.hasClass('active'))
            $(".accordion .tab div.content:visible").slideToggle("normal");
        else {
            $(".accordion .tab div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

Проблема в том, что с css3 он не ведет себя так же, как на веб-сайте fortheloveoflaundry.com

Так что попробовал jquery для достижения плавного скольжения аккордеона. Когда вы нажимаете вкладки один или два раза, панель не скользит вверх или вниз плавно. Думайте, что JQuery работает неправильно.

Помогите оценить

joe 22 июнь 2014, в 08:52

Источник

Теги:

jquery

css3

1 ответ

Ещё вопросы

King King · Accepted Answer · 2014-06-22T04-19-00.000Z

Вы уже использовали slideToggle для анимации, поэтому вам не нужен переход CSS, а также код CSS, изменяющий height в правиле :target. Так много CSS-кода в вашей демонстрации можно удалить (я просто прокомментировал их). Вот обновленный скрипт:

//hide the content intially
$('.accordion div .content').slideToggle(0);   
$('.accordion .tab').on('click', function(event) {
    var parent_tab = $(this).parent();
    if (parent_tab.hasClass('active')) return;                    
    $('.active div.content').slideToggle();
    $(this).next("div.content").slideToggle();              
    $('.accordion .active').removeClass('active');
    parent_tab.addClass('active');       
});

Demo.

UPDATE: если вы хотите сбрасывать функцию, например, в виджете аккордеона в пользовательском интерфейсе jQuery, вы можете попробовать эту демонстрацию.

Благодарю. но когда я нажимаю на одну вкладку, то содержимое открывается. все работало нормально, но когда я снова щелкаю ту же вкладку, содержимое не закрывается?
@ Джо, пожалуйста, проверьте демо, которое я обновил.
спасибо за демо Я добавил несколько строк, чтобы проверить, будет ли отображаться первый контент. Не уверен, почему это не работает? ссылка
@joe выглядит так, как будто вы хотите это jsfiddle.net/viphalongpro/JWfdx/20 Также вы должны были точно описать, что вы хотели, чтобы у вас было решение раньше.
спасибо и извините это будет работать для h3, если я заменю тег href на h3? Я пробую это.
Обновление: кажется, не работает для тега href и h3 на моем локальном. не знаю, почему это не так же, как jsfiddle. Я понимаю это.
@joe вместо этого он должен работать с h3 пока вы продолжаете использовать tab класса для тегов h3 , проверьте этот jsfiddle.net/viphalongpro/JWfdx/22 . Также курсор, зависший на h3 должен быть pointer (чтобы показать, что он кликабелен).
Большое спасибо за помощь. Интересно, что я заменил тег href на h3 без вкладки класса и немного изменил в jquery - он работал не слишком хорошо. Так что без класса это не сработало бы.