только один аккордеон панель Open В Время

Question

$(document).ready(function(){ 
 
\t var allPanels = $('.accordian li div'); 
 
\t 
 

 
\t allPanels.hide(); 
 
\t $('#nav-list li a').click(function() { 
 
\t \t var id; 
 
\t \t 
 
\t \t if(this.id == id) { 
 
\t \t \t allPanels.slideUp('slow'); 
 
\t \t \t alert("hello"); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t allPanels.slideUp('slow'); 
 
\t \t \t $(this).parent('li').find('div').toggle('slow'); 
 
\t \t \t id = this.id; 
 
\t \t } 
 

 
\t \t return false; 
 

 
\t }); 
 
});

.accordian { 
 
\t 
 
\t width: 300px; 
 
\t height: 400px; 
 
} 
 

 
.accordian li { 
 
\t width: 100%; 
 
\t list-style-type: none; 
 
\t padding: 10px; 
 
    border: 1px solid black; 
 
    border-bottom: 0; 
 

 
} 
 
.accordian li:last-child { 
 
\t border-bottom: 1px solid black; 
 
} 
 
.accordian a { 
 
\t display: block; 
 
\t width: 100%; 
 
\t color: black; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
\t background-color: #a3a3a3; 
 
} 
 
.contentArea { 
 
\t border-top: 0; 
 
    font-size: 12px; 
 
    background-color: #7BBF6A; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="nav-list" class="accordian"> 
 
\t \t <li id="select_1"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li id="talk_1"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t <li id="talk_2"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li id="talk_3"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li id="talk_8"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li id="talk_9"> 
 
\t \t \t <a href="">Some Text</a> 
 
\t \t \t <div class="contentArea"> 
 
\t \t \t \t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t </ul>

У этой простой аккордеон, и хотел бы только одну панель аккордеона открытой в то время. Мой код работает, пока я дважды нажимаю на ту же панель, пытаясь ее закрыть. Он не будет закрываться, и он всегда имеет одну панель открытой. Может ли кто-нибудь указать, где я ошибся с моей логикой и как ее исправить? Я включил в себя фрагмент кода:

Answer 1

ОК, попробуйте другой/простой способ сделать аккордеон с помощью JQuery.

Во-первых, основной HTML. Используются два класса. Никаких реальных css, просто используемых имен классов в качестве селекторов. Существуют .selector div и .text divs. Вы можете увидеть это в действии на http://www.infohio.org/sample.

<ul> 
    <li> 
    <div id="select1" class="selector">Select 1</div> 
    <div id="text1" class="text" style="display: none;">Text Goes Here</div> 
    </li> 
    <li> 
    <div id="select2" class="selector">Select 2</div> 
    <div id="text2" class="text" style="display: none;">Text Goes Here</div> 
    </li> 
    <li> 
    <div id="select3" class="selector">Select 3</div> 
    <div id="text3" class="text" style="display: none;">Text Goes Here</div> 
    </li> 
    <li> 
    <div id="select4" class="selector">Select 4</div> 
    <div id="text4" class="text" style="display: none;">Text Goes Here</div> 
    </li> 
</ul> 

И JQuery:

jQuery(function($) { 
    $(".selector").on("click",function() { 
     var id=$(this).attr("id").replace("select",""); 
     $(".text").hide(); 
     $("#text"+id).show(500); 
    }); 
}); 

Когда селектор щелкнул, он использует селектор ID, чтобы получить соответствующий текст ID. Затем все div .text div скрыты и отображается выбранный div .text.

Answer 2

1. Проблема, почему ваш alert section никогда не верно, потому что, у вас есть установить var id; как локальной переменной. Из-за этого значения никогда не хранится, и он всегда остается неопределенным при каждом нажатии кнопки . Следовательно, сделайте его глобальной переменной.

2. Существует еще одна проблема, вы написали click событие для тега привязки$('#nav-list li a').click(function() {...}, следовательно this.id будет пытаться извлечь идентификатор якоря и не li, поэтому у необходимо изменить идентификатор для тега привязки.

JS:

$(document).ready(function(){ 
    var allPanels = $('.accordian li div'); 

    var id; 
    allPanels.hide(); 
    $('#nav-list li a').click(function() {   
     if(this.id == id) { 
      allPanels.slideUp('slow'); 
      alert("hello"); 
     } 
     else { 
      allPanels.slideUp('slow'); 
      $(this).parent('li').find('div').toggle('slow'); 
      id = this.id; 
     } 
     return false; 
    }); 
}); 

Или вы могли бы сделать var id; глобальной и получить id от родителя т.е. li вместо перемещения идентификатора на якорь тег.

DEMO

JS:

$(document).ready(function(){ 
    var allPanels = $('.accordian li div'); 

var id; 
    allPanels.hide(); 
    $('#nav-list li a').click(function() { 
     if($(this).closest('li').attr('id') == id) { 
      $(this).parent('li').find('div').toggle('slow');    
     } 
     else { 
      allPanels.slideUp('slow'); 
      $(this).parent('li').find('div').toggle('slow'); 
      id = $(this).closest('li').attr('id'); 
     } 
     return false; 
    }); 
});