SlideUp div, если любой другой div скользит вниз с помощью jQuery - PullRequest
Новая
       5

SlideUp div, если любой другой div скользит вниз с помощью jQuery

4 голосов
/ 05 января 2011

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

$("a.about").click(function(){
    $("#about").slideDown("slow");
    });

$("a.info").click(function(){
    $("#info").slideDown("slow");
    });

$("a.contact").click(function(){
    $("#contact").slideDown("slow");
    });

Ответы [ 4 ]

1 голос
/ 05 января 2011

Если скользящие элементы - это братья и сестры, и соответствие имен классов и идентификаторов, как описано, вы можете сделать что-то вроде этого: 

var links = ['a.about','a.info','a.contact','a.etc'];

$( links.join(',') ).click( function(e){
  e.preventDefault();
  $('#' + this.className).siblings().slideUp('slow').end().slideDown('slow');
});

Если все ссылки находятся в каком-либо контейнере, вы можете упростить дальнейшее: 

$('div#nav-container').find('a').click( function(e){...} );
1 голос
/ 05 января 2011

Обычно это можно сделать, добавив класс ко всем элементам div, которыми вы хотите управлять, и затем slideUp (), используя этот класс в начале каждого клика. 

$('a.xxx').click(function(){
    $('.sliders').slideUp()
    // slide down other div here
});

thisфактически сдвинет ВСЕ div с классом «ползунки», но создаст иллюзию того, что ранее нажатый div сдвинулся вверх, так как только один должен когда-либо опускаться.

1 голос
/ 05 января 2011

Возможно, вы захотите взглянуть на jQuery UI аккордеон .

0 голосов
/ 05 января 2011

Самый простой подход - дать дополнительное общее имя класса всем элементам, которые вы пытаетесь скользить вверх / вниз, а затем подключить фактические привязки к элементам, используя атрибут href на привязке.Приведенный ниже фрагмент javascript (с изменениями в HTML) будет выполнять те же функции, что и ваш текущий javascript, а также упростит добавление дополнительных слайдеров: 

# the html
<a class='about slide-control' href='#about'>toggle the about section</a>
<a class='info slide-control' href='#info'>toggle the info section</a>
<a class='contact slide-control' href='#contact'>toggle the contact section</a>

<div class='slider' id='about'>
    this is the about section
</div>
<div class='slider' id='info'>
    this is the info section
</div>
<div class='slider' id='contact'>
    this is the contact section
</div>    

# the javascript
$('a.slide-control').click(function() {
    $('div.slider').slideUp();
    var target = $(this).attr('href');
    $(target).slideDown('slow');
});

Вы можете просто добавить новый слайдердобавив правильный HTML: 

<a class='slide-control' href='#new_section'>Tell me more about this new section!</a>

<div class='slider' id='new_section'>
    This is a great paragraph about the new section on our website!
</div>

В качестве альтернативы, вы можете использовать существующие классы и просто добавить вызов метода .slideUp для других ваших элементов перед .slideDown: 

$('a.about').click(function() {
    $("#info").slideUp('slow');
    $("#contact").slideUp('slow');
    $("#about").slideDown('slow');
});

// repeat for each click handler
...