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

您在1991-1992的内容中使用 br 而不是 div 关闭。问题始终是迈克尔乔丹。检查 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 2

您可能多次附加事件处理程序？（因为窗口调整大小处理，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')
});

编辑：并且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 3

您的代码运行正常。这是一个奇怪的问题。你可以使用preventDefault（）函数。看看是否有效。

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

Answer 4

请使用此链接中所述的平滑手风琴。

https://jqueryui.com/accordion/

jquery手风琴滑了太多次

4 个答案: