手风琴 JQuery 不工作

Question

这是我第一次使用 jQuery。我已经检查过很多次了。我不知道为什么它不起作用。结果应该是手风琴。

也许有人能注意到为什么它仍然稳定？ ;)

Answer 1

我不知道这个答案是否会让你满意...因为结果有效但丑陋。

您刚刚有几个错别字：

缺少 $ 标志
.slideDown()没有大写
在 .addClass('active);

}

您似乎加载了 jQuery 两次。在您的脚本之前的 <head> 和中正确：<script src="bower_components/jquery/jquery.js"></script>。（所以删除它）。

我强烈建议您使用代码编辑器...如果您还没有的话。它使代码审查更容易。

$(function() {
  $('.tab-panels .tabs li').on('click', function(){
    $('.tab-panels .tabs li.active').removeClass('active');
    $(this).addClass('active');
    var panelToShow = $(this).attr('rel');
    $('.tab-panels .panel.active').slideUp(300, showNextPanel);
    
    function showNextPanel(){
      $(this).removeClass('active');
      $('#'+panelToShow).slideDown(300, function () {
        $(this).addClass('active');
      });
    }
  });
});

ul {
list-style-type: none;
}
ul li {
  display: inline-block;
  padding: 25px;
  background-color: gray;
  border-radius: 20%;
  text-align: center;
  color: white;
}
.tab-panels .panel.active {
  display: block;
  width: 28%;
  text-align: center;
  padding: 20px 0 20px 0;
}
.tab-panels ul li:hover {
  background-color: black;
}
.tab-panels ul li:active {
  background-color: black;
}
.panel {
  display: none;
  background-color: yellow;
  height: 24%;
}

<html>
  
<head> 
  <title> task </title> 
  <link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>
  <body>
    <div class="tab-panels">
      <ul class="tabs"> 
        <li class="active" rel="panel1">numer 1 </li>
        <li rel="panel2">numer 2 </li>
        <li rel="panel3">numer 3 </li>
        <li rel="panel4">numer 4 </li>
      </ul>
     
    <div class="panel active" id="panel1">
    raz</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel2">
    dwa</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel3">
    trzy</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel4">
    cztery</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
</div>
 
  </body>
</html>

手风琴 JQuery 不工作

Accordion JQuery doesn't work

jquery

jquery-ui-accordion