Question

当您点击初始链接进入我的网站并使用手风琴进入网页时，手风琴出现并按照要求隐藏在1500。但是，当我点击标题以显示文本时，没有任何内容出现。标题只是突出显示。没有错误，控制台日志状态＆＃34;准备做一些jquery＆＃34;正如我要求的那样。

我的观点的一部分

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo base_url('/js/my_accordian.js'); ?>"></script>

<div id="accordion">    
   <h2>Information</h2>
   <p>more information</p>
   <h2>Information 2</h2>
   <p>more information 2</p>    
   <h2>Information 3</h2>
   <p>more information 3</p>
</div>

js

$(document).ready(function () {
console.log("ready to do some jquery");
$('h2').addClass('exampleClass');
$('p').hide(1500);
$("h2").click(function () {
    $('.activeHeading').next().slideUp(400);
    $('activeHeading').removeClass('activeHeading');
    $(this).addClass('activeHeading');
    $(this).next().slideToggle(400);
 });
});

CSS

body {
    font-family:"Arial";
    font-size:0.8em;
    color:black;
    line-height:22px;
   }
h2 {
   /*border-top:1px solid #999999; */
   padding:5px;
   }
.pageTitle {
    font-family:"Garamond";
    color:#777777;
    font-weight:lighter;
    font-size:3em;
}
.activeHeading {
    color:#00AAFF;
}
.exampleClass {
    background-color:red;
}
.anotherExampleClass {
    background-color:blue;
}

Answer 1

更新了代码：http://jsfiddle.net/lotusgodkk/GCu2D/89/

<div id="accordion">
 <h2>Information</h2>
 <p>more information</p>
 <h2>Information 2</h2>
 <p>more information 2</p>
 <h2>Information 3</h2>
 <p>more information 3</p>
</div>

JS：

$(document).ready(function () {
console.log("ready to do some jquery");
$('h2').addClass('exampleClass');
$('p').hide(1500);
$("h2").click(function () {
    $('.activeHeading').next().slideUp(400);
    $('.activeHeading').removeClass('activeHeading');
    $(this).addClass('activeHeading');
    $(this).next().slideToggle(400);
});
});

更正：在段落中添加了结束标记。将$（'activeHeading'）...替换为$（'。activeHeading'）..现在是一个有效的选择器。检查这是否是您需要的。

Answer 2

$(document).ready(function() {        
  $('#accordion h2').addClass('exampleClass');    
  $('#accordion p').hide(); 
  $("#accordion h2").click(function () {
      $("#accordion p").slideUp();
      $("#accordion h2").removeClass('activeHeading');
      $(this).addClass('activeHeading');
      $(this).next().slideToggle(400);
   });
});


// YOUR ERROR
// $('.activeHeading').next().slideUp(400);
// $('activeHeading').removeClass('activeHeading');

jquery手风琴没有显示信息

2 个答案: