проблемы со слайдапом

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

    $items = $('#accordion a.item');
    $items.click(function () {
        $items.removeClass('selected');
        $(this).addClass('selected');
        $('#accordion li').children('ul').slideUp('slow'); 
        $(this).siblings('ul').slideDown('slow');  
        return false;
    });

и HTML:

<ul id="accordion">
    <li>
        <a href="#" class="item">BANKS</a>
        <ul>BLA BLA BLA</ul>
    </li>
    <li>
        <a href="#" class="item">PETROL</a>
        <ul>BLA BLA BLA</ul>
    </li>
</ul>

все, что я хочу, это сделать так, чтобы его можно было закрыть.

и спасибо всем за помощь и уделенное время, я очень ценю это!


javascript jquery slidedown slideup
person Bato Dor    schedule 03.04.2012    source источник
comment
Привет, так что все, что вам нужно, это скользить вверх и вниз, когда вы нажимаете на заголовок якоря? просто проверяю, прежде чем опубликовать свой ответ! У меня может быть jsfiddle для вашего вопроса в качестве демонстрации, привет!   -  person Tats_innit    schedule 03.04.2012
comment
@tats_init да, но если я нажму на другую ссылку, предыдущая закроется, я имею в виду слайд вверх. но если я нажму на открытую ссылку, она должна закрыться   -  person Bato Dor    schedule 03.04.2012
comment
Saweet дай мне 2 минуты у меня есть решение для вас! ваше здоровье   -  person Tats_innit    schedule 03.04.2012
comment
@Tats_innit чувак! :) позитивные намерения приветствуются =3   -  person Bato Dor    schedule 03.04.2012
comment
code ‹script type=text/javascript charset=utf-8› $(document).ready(function () { $items = $('#accordion a.item'); $('#accordion li').children( 'ul').slideUp('slow'); $items.click(function () { $('#accordion li').children('ul').slideUp('slow'); if ($(this) [0] != $('.selected')[0]) { $(this).siblings('ul').slideDown('slow'); } $items.removeClass('selected'); $(this ).addClass('выбрано'); вернуть ложь; }); }); ‹/скрипт›   -  person bart s    schedule 03.04.2012
comment
@barts, ты можешь изменить свой ответ, и я приму его;)   -  person Bato Dor    schedule 03.04.2012
comment
лол - хаос :P в любом случае, я написал для вас компактный код, посмотрите, напишите, теперь играйте с щелчком снова и закройте версию, приятной! ура   -  person Tats_innit    schedule 03.04.2012

Ответы (2)


arrow_upward
2
arrow_downward

У вас есть слайд после вашего слайда

    $('#accordion li').children('ul').slideUp('slow'); 
    $(this).siblings('ul').slideDown('slow');

когда селекторы для обоих равны, он будет скользить вверх и вниз.

Вы можете попробовать пропустить слайд для выбранного элемента, если он был открыт при нажатии

РЕДАКТИРОВАТЬ

Код Javascript будет немного изменен

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $items = $('#accordion a.item');
        $('#accordion li').children('ul').slideUp('slow'); 
        $items.click(function () {
            $('#accordion li').children('ul').slideUp('slow'); 
            if ($(this)[0] != $('.selected')[0]) {
               $(this).siblings('ul').slideDown('slow');  
               $items.removeClass('selected');
               $(this).addClass('selected');
            } else {
               $items.removeClass('selected');
            }
            return false;
        });     
    }); 
</script>
person bart s    schedule 03.04.2012
comment
if (!$(this).is('.selected')) { // скользим сюда } Обратите внимание, что вы также должны перемещаться, добавляя и удаляя выбранный класс РЕДАКТИРОВАТЬ, была ошибка в селекторе - person bart s; 03.04.2012
comment
большое спасибо! Вы ответили на мой вопрос, но как мне удалить класс после того, как я его закрою?! :) - person Bato Dor; 03.04.2012
comment
«выбрано» — это просто имя класса, прикрепленное к тегу. он все еще там, когда вы закрываете его. Я рекомендую вам использовать инструменты разработчика Google Chrome или Safari. Затем вы можете установить точки останова в javascript и проверить html. Требуется немного времени, чтобы привыкнуть к инструментам, но очень полезно увидеть, что происходит под капотом. - person bart s; 03.04.2012
comment
Ах поймал. Я понимаю, что вы имеете в виду. Соответственно обновил код (не проверял) - person bart s; 03.04.2012

arrow_upward
2
arrow_downward

Привет, вот демо: http://jsfiddle.net/uetGd/29/< /а>

Исправлена ​​другая проблема, которую вы можете улучшить: http://jsfiddle.net/uetGd/39/

HTML

<ul id="accordion">
    <li>
        <a href="#" class="item">BANKS</a>
        <ul>BLA BLA BLA</ul>
    </li>
    <li>
        <a href="#" class="item">PETROL</a>
        <ul>BLA BLA BLA</ul>
    </li>
</ul>​

Код JQuery

$('.item')
    .ready(accordionSlideUpDown) // on ready
    .click(accordionSlideUpDown); // on click


function accordionSlideUpDown(){
    $('#accordion').children().children('ul').slideUp();
    $(this).next().slideToggle();   
}
​

ИЛИ Изменить

$('#accordion').children().children('ul').slideToggle();
var previous = "";

$('.item')
    .ready(accordionSlideUpDown) // on ready
    .click(accordionSlideUpDown); // on click


function accordionSlideUpDown(){
    var newval = $(this).text();

    $('#accordion').children().children('ul').slideUp();

    if (newval != previous){
         $(this).next().slideToggle('slow');
    }
      previous = $(this).text();                       
}

​
person Tats_innit    schedule 03.04.2012
comment
у этого есть та же проблема скольжения / скольжения, если некоторые элементы добавлены - person bart s; 03.04.2012
comment
дай мне еще 1 минуту, чтобы обновить мой ответ LOLz! :) - person Tats_innit; 03.04.2012
comment
@Tats_innit жду тебя :) - person Bato Dor; 03.04.2012
comment
@venom сделал то, что вы хотели увидеть здесь: jsfiddle.net/uetGd/39 Я пошел спать скоро уже поздно в моей части земного шара :)) cheerios - person Tats_innit; 03.04.2012
comment
@venom done man только что пропинговал тебя :) но слишком поздно ты принял другой ответ, черт возьми; теперь должен мне пиццу! есть хороший! - person Tats_innit; 03.04.2012
comment
@Tats_innit: +1 за ответ - person bart s; 03.04.2012
comment
@Tats_innit, спасибо, теперь ваш код длиннее )) вы можете написать то же самое с добавлением и удалением класса «выбрано»? - person Bato Dor; 03.04.2012
comment
@barts, лол, да здравствует мужик! яд играть с переключателем слайдов Я думаю, вы можете сделать это очень здорово,! - person Tats_innit; 03.04.2012
comment
@Tats_innit о! :) bart s, снова был на шаг впереди ^.^ - person Bato Dor; 03.04.2012
comment
@venom да, я думаю, если тебе нужен класс, иди с тем, что сделал для тебя Барт; если вы просто хотите скольжение переключателя, не ориентированного на класс, взгляните на переключатель слайдов или, возможно, это даст вам представление: stackoverflow.com/questions/9433552/ ; это немного поздно в этом конце, так что скоро выручит. :) Приятно поговорить с вами обоими, ребята! есть хороший! - person Tats_innit; 03.04.2012