Блог

Я написал простой скрипт, который ведет себя как аккордеон. Тем не менее, я хотел бы еще больше улучшить код следующими способами:

1. Возможно ли иметь более одного экземпляра приведенной ниже разметки, используя класс, как показано ниже, без того, чтобы один влиял на другой, потому что на данный момент это так.
2. Возможно ли пользователю, который просматривает табуляцию, развернуть список с помощью пробела. На данный момент возможно развернуть, закрыть и открыть каждый список с помощью клавиши enter?

Код:

 <ul>
    <li>
        <a href="#" class="main">Test</a>
        <div class="container"><p>More information goes here</p></div>
    </li>
    <li>
        <a href="#" class="main">Test</a>
        <div class="container"><p>More information goes here</p></div>
    </li>
</ul>

$(document).ready(function(){
    $('.container').hide(); 
    $('.main').click(function(){
        if( $(this).siblings('div').is(':hidden') ) { 
            $('.main').removeClass('active').siblings('div').slideUp(); 
            $(this).toggleClass('active').siblings('div').slideDown(); 
        }else{
            $(this).toggleClass('active').siblings('div').slideUp();
        }
        return false; 
    });
});

$('a.main').keypress(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
       if(code.keyCode==32 || code.keycode==13) {
           $(this).click();
       }
 });    
  

1. Вы можете использовать id атрибут вместо class. Селектор выглядит следующим образом "#theId" . Итак, вы бы добавили

   id="container1" и id="container2" , или что-то эквивалентное каждому из элементов, для которых у вас есть main класс, и затем вы должны выбрать для своего обработчика щелчков, например

    ${'#container1'}.click(...);
   ${'#container2'}.click(...);
   ...
     

2. Это, безусловно, возможно. Вам пришлось бы зарегистрировать обработчик событий, чтобы фиксировать нажатия клавиш в соответствующем месте (зависит от того, хотите ли вы, чтобы нажатие клавиши было зафиксировано, например, если аккордеон имеет фокус), а затем вызвать соответствующее действие в зависимости от нажатия клавиши.