Я создаю многоязычный аккордеон, используя jQuery. Панель "Заголовок 1" отлично работает, но в "Заголовке 2" панель дважды запускает метод SlideDown(). Еще одна небольшая проблема, которую я заметил, заключается в некоторой задержке между ними, когда я нажимаю кнопку/ссылку и когда панель скользит вниз.
Вы можете посмотреть здесь jsfiddle, чтобы проверить и увидеть проблему:
$(document).ready(function() {
var class_link, class_div, content_div;
var all_panels = $('article > div.row').not(':first-child');
$(all_panels).hide();
$('div.buttons a').click(function() {
class_link = $(this).attr('class');
class_div = class_link.match(/[^-]+$/);
content_div = $(this).closest('article').find('div.' + class_div).parent();
if ($(content_div).is(':visible')) {
$(all_panels).slideUp();
} else {
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
}
return false;
});
});
<section class="grid-container">
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 1</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 2</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
</section>
// replace
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
//with
$(all_panels).slideUp().promise().done(function() {
$(content_div).hide().slideDown();
});