Jquery Accordion с нуля: разметка для аккордеона и исполнения Jquery Q - PullRequest
Новая
       16

Jquery Accordion с нуля: разметка для аккордеона и исполнения Jquery Q

2 голосов
/ 11 марта 2012

Большое спасибо за любые ответы.

Я пишу аккордеон jquery, но задаюсь вопросом, правильны ли мои разметка и jquery .. (в соответствии с семантическим html)

Мой первый вопрос: каков правильный семантический html для accourdion в контексте, для которого я его использую ( Пример JSFIDDLE ) .. В настоящее время я использую ul ... с li и div для контента ..

второй вопрос, можно ли улучшить этот jquery и можно ли измерить производительность конкретного скрипта jQuery?

Пример JSFIDDLE 

$(document).ready(function(){
    //store the exact block of html we are working with... the context
    var $context = $("ul#accordion")[0];
    console.log($context);
    //check the context
    $("li a", $context).live("click", function(e){
       //store this due to being used more than once
        var $clicked = $(this);
        //slide anything up thats already open
        $("li div", $context).slideUp(200);
        //test to see if the div is hidden or not..
        //slide down if hidden
        if($clicked.next().is(":hidden")){
            $clicked.next().slideDown(200);
        };
    //prevent default behaviour 
    e.preventDefault();
    });

});​

1 Ответ

1 голос
/ 11 марта 2012
  • Поскольку вы используете $(selector, context) (равно $(context).find(selector)), только на одном элементе, я рекомендую объединить их: $('ul#accordion li')
  • Использовать $(ancestor).on('event', 'selector', fn) вместо $('ancestor selector').live(fn)
  • Поместите e.preventDefault() сверху.Всякий раз, когда в вашем коде возникает ошибка, отрицательные побочные эффекты не возникают.
  • Мои другие предлагаемые изменения указаны в комментарии к вашему вопросу.

Код: 

$(document).ready(function(){
    // :first can be omitted, but it's an literal translation
    $("ul#accordion:first li").on("click", "a", function(e) {
        // prevent default behaviour 
        e.preventDefault();

        // slide anything up thats already open
        $("li div", this).slideUp(200);

        // slide down if hidden
        $clicked.next(':hidden').slideDown(200);
    });
});
...