jQuery: Как я могу воспроизвести эффект выталкивания Аккордеона без jQuery UI?

Question

Я просто изучаю jQuery, выясняя, что возможно, ища свой путь.

Я бы хотел, чтобы div «выскользнул», как аккордеон, но я не хочу платить за загрузку пользовательского интерфейса jQuery, а также хочу разрешить открытию нескольких divs на одном и том же время.

Как это работает? Как эффект выталкивания аккордеона выполняется внутри jquery.ui.accordion.js? Есть ли звонок, который я могу сделать до .animate(), чтобы переместить div с display:none на display:block? (Я читал, что анимация работает только с числовыми свойствами.)

Answer 1

Я изучаю всевозможные вещи. Я использовал только jQuery - нет интерфейса, нет Аккордеона UI, нет эффектов пользовательского интерфейса и получил эффект слайда, который я хотел. Не уверен в терминологии этого визуального эффекта. (Я думаю, что это половина проблемы с jQuery - что я называю различными эффектами). Я думаю, что, может быть, некоторые люди называют это «тумблером».

Нажмите, чтобы увидеть эффект: http://jsbin.com/ogape

Вот HTML фрагмент

<div id="div0"> 
    <p id="intro"><a href="#" class='expander'>+</a> Introduction</p> 

    <div class='indented' style='display:none'> 
    <p > 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer 
     vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus, 
     sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam. 
    </p> 

    <p> Quisque pharetra lacus quis sapien. Duis 
     id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat, 
     lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce 
     hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare 
     id, nulla. Suspendisse potenti. Nullam in mauris. 
    </p> 
    </div> 
</div> 

Это код JQuery:

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 
    }; 

    $(document).ready(function() { 
     $('div p a[href="#"]').click(function() { slideOut(this); }); 
    }); 

Эта функция slideOut() немного упрощен от чего это на самом деле. Он также меняет местами + и - для кнопки расширителя в реальном коде, что делает его немного более сложным:

var slideOut = function(element){ 
     var parent = $(element).parent().parent(); // outer div 
     var dList = parent.children("div"); // inner div, all siblings of the <a> 
     dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow'); 

     // swap characters on the expander "button" 
     var o = dList.css("opacity"); 
     // dash is narrower than +, so we must compensate 
     if (o==1) { 
      $(element).html("+") 
       .css("padding-left", "1px") 
       .css("padding-right", "1px"); 
     } else { 
      $(element).html("-") 
       .css("padding-left", "3px") 
       .css("padding-right", "3px"); 
     } 
    }; 

Вы можете увидеть полный HTML/код на расслоении плотного демонстрационной ссылки живой, указанной выше.

Главное, что я не знал, это то, что можно анимировать высоту, вызвав анимацию с помощью "toggle".

Answer 2

Вы можете использовать slideDown и slideUp, если вы создаете вертикальный аккордеон, в противном случае вам нужно будет объединить немного больше CSS, чтобы позволить использовать анимацию в позиционировании некоторых div.

Answer 3

Только FYI, минимизированный эффект слайда в jQueryUI и ядре будет всего лишь ударом 5,5 КБ по первому запросу. Всю библиотеку jQueryUI не потребуется. Файлы, которые вам нужны - ui.slider.min.js и ui.core.min.js

Answer 4

Вы можете сделать это для одного элемента.

var accordion = function(toggleEl, accEl) { 
    toggleEl.click(function() { 
     accEl.slideToggle(function() { }); 
     return false; 
    }); 
} 

Использование slideToggle

http://docs.jquery.com/Effects/slideToggle

Но если вы хотите сделать несколько уровней, вам необходимо будет добавить функцию, чтобы пройти через все пункты и Двигайте их вверх или скрыть их перед slidetoggle если вы хотите, чтобы только один объект был открыт одновременно. Это может помочь jquery accordion. Они подключены во многих вариантах, подобных этому.