jquery аккордеон сползает слишком много раз

Question

У меня есть аккордеон, когда вы нажимаете на каждую кнопку, он расширяется и отображает дополнительную информацию. Он работает отлично, однако каждый раз, когда я нажимаю каждую кнопку, чтобы развернуть его, окно кажется скольжением вверх и вниз, как 7/8 раз, перед отображением окна содержимого. Я бы идеально хотел, чтобы он скользил вверх и вниз в два или три раза, прежде чем показывать полный контент. Как наилучшим образом достичь этого.

HTML:

<div id="ss_menu"> 
    <h3><b>Winning Ways</b></h3> 
    <div class="ss_button">1990-1991</div> 
    <div class="ss_content">1st NBA Title<br /> 
    61 Wins 21 Losses<br />MVP Michael Jordan<br /> 
    Defeated LA Lakers<br /></div> 
    <div class="ss_button">1991-1992</div> 
    <div class="ss_content">Repeat Champions<br /> 
    67 Wins 15 Losses<br />MVP Michael Jordan<br /> 
    <div class="ss_button">1992-1993</div> 
    <div class="ss_content">ThreePeat Champions<br />57 Wins 25 Losses<br /> 
    MVP Michael Jordan<br />Defeated Phoenix Suns<br /></div> 
    <div class="ss_button">1995-1996</div> 
    <div class="ss_content">1st NBA Title in 3 years<br /> 
    72 Wins 10 Losses<b>(NBA history)</b><br />MVP Michael Jordan<br /> 
    <b>*Michael Jordan came back from retirement!</b><br />Defeated LA 
    Lakers<br /></div> <div class="ss_button">1996-1997</div> 
    <div class="ss_content">2nd Repeat<br />69 Wins 13 Losses<br /> 
    MVP Michael Jordan<br />Defeated Utah Jazz<br /></div> 
<div class="ss_button">1997-1998</div> <div class="ss_content"> 
    2nd ThreePeat<br />62 Wins 20 Losses<br />MVP Michael Jordan<br /> 
    Defeated Utah Jazz<br /></div> 
    </div> 

CSS:

body { 
font-family: Arial, Helvetica, sans-serif; 
} 

#ss_menu h3{ 
color: white; 
} 

#ss_menu { 
width: 200px; 
position:absolute; 
right:10px; 
top:825px; 
z-index:1 
} 

.ss_button { 
background-color: black; 
border-bottom: 1px solid #FFFFFF; 
cursor: pointer; 
padding: 10px; 
color: #FFFFFF; 
    border-radius: 5px; 

} 

.ss_content { 
background-color: #EFEFEF; 
display: none; 
padding: 10px; 
    border-radius: 5px; 

} 

JS:

jQuery(function() { 
jQuery('.ss_button').on('click', function() { 
    jQuery('.ss_content').slideUp('fast'); 
    jQuery(this).next('.ss_content').slideDown('fast'); 
}); 
}); 

Answer 1

Пожалуйста, используйте плавную гармони, как описано здесь, в этой ссылке.

https://jqueryui.com/accordion/

Answer 2

Вы используете бры вместо Дива замыкания в содержимом 1991-1992. Проблема всегда Michael Jordan. Проверьте https://jsfiddle.net/VixedS/jbz6dxbp/ ваш код работает хорошо. Странно, но работает.

<div class="ss_button">1991-1992</div> 
    <div class="ss_content">Repeat Champions<br /> 
    67 Wins 15 Losses<br />MVP Michael Jordan 
    </div> 

Answer 3

Возможно, вы прикрепляете обработчик событий более одного раза? (потому что обработка изменения размера окна, загрузка ajax & добавление элементов или что-то подобное) Простой тест: добавьте «обработанный» класс к вашим «.ss_buttons» сразу после прикрепления клика и используйте как селектор «.ss_button: not (.processed) ".

jQuery(function() { 
jQuery('.ss_button:not(.processed)').on('click', function() { 
    jQuery('.ss_content').slideUp('fast'); 
    jQuery(this).next('.ss_content').slideDown('fast'); 
}); 
jQuery('.ss_button:not(.processed)').addClass('processed') 
}); 

EDIT: и HTML есть также проблема, как vixed отметил:

<div id="ss_menu"> 

<h3><b>Winning Ways</b></h3> 

<div class="ss_button">1990-1991</div> 
    <div class="ss_content"> 
    1st NBA Title<br /> 
    61 Wins 21 Losses<br />MVP Michael Jordan<br /> 
    Defeated LA Lakers<br /> 
    </div> 

<div class="ss_button">1991-1992</div> 
    <div class="ss_content"> 
    Repeat Champions<br /> 
    67 Wins 15 Losses<br /> 
    MVP Michael Jordan<br /> 
***** <-- Should'nt be here a "</div>" 

<div class="ss_button">1992-1993</div> 
    <div class="ss_content"> 
    ThreePeat Champions<br /> 

... 

</div> 

Answer 4

Ваш код работает отлично. Это странная проблема. Вы можете использовать функцию preventDefault(). Посмотрите, работает ли это.

jQuery('.ss_button').on('click', function (event) { 
    event.preventDefault(); 
    jQuery('.ss_content').slideUp('fast'); 
    jQuery(this).next('.ss_content').slideDown('fast'); 
});