jQuery Accordionfunction面板在不应打开时打开

我从一个网站（励志像素）中抓取了一个很棒的可折叠手风琴代码。 它工作得很好，除了问题是每当我点击“WEIRD PART”这个词时，面板再次打开，它不应该是。 当我点击“第1章”这个词时，手风琴可以正常工作。 这个词上附有一个span类可能就是这样吗？ 你会明白我的意思

HTML代码： 

Chapter 1 WEIRD PART 
 
 
Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.

Chapter 2 WEIRD PART

Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.

Chapter 3 WEIRD PART

Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.

JS代码： 

  jQuery(document).ready(function() { function close_accordion_section() { jQuery('.bb-story-chapters .bb-sc-title').removeClass('active'); jQuery('.bb-story-chapters .bb-story-content').slideUp(300).removeClass('open'); } jQuery('.bb-sc-title').click(function(e) { // Grab current anchor value var currentAttrValue = jQuery(this).attr('href'); if(jQuery(e.target).is('.active')) { close_accordion_section(); }else { close_accordion_section(); // Add active class to section title jQuery(this).addClass('active'); // Open up the hidden content panel jQuery('.bb-story-chapters ' + currentAttrValue).slideDown(300).addClass('open'); } e.preventDefault(); }); });

如果您不想使用jQuery Accordion UI ，可以试试这个：

HTML： 

 
 
Chapter 1
 
Testing Chapter 1
 
Chapter 2
 
Testing Chapter 2
 
Chapter 3
 
Testing Chapter 3

CSS： 

 .accordion h2 { border-radius: 0; color: #295376; font-weight: 400; text-decoration: none; } .accordion h2:before { content: '\25b6\00a0'; font-size: 19px; vertical-align: middle; } .accordion h2.open:before { content: '\25bc\00a0'; font-size: 16px; vertical-align: baseline; } .accordion h2, .accordion h2:active, .accordion h2:focus, .accordion h2:hover { border-color: transparent } .accordion h2:focus, .accordion h2:hover { color: #0535d2; text-decoration: none; }

使用Javascript： 

 function accordion(effect) { $('div.accordion h2').each(function() { if (!$(this).next().is(":hidden") && !$(this).attr('open')) { $(this).removeClass('open'); $(this).next().hide(effect); } else if ($(this).attr('open')) { $(this).removeAttr('open'); $(this).addClass('open'); $(this).next().show(effect); } }); }; accordion(); $('div.accordion h2').click(function() { if ($(this).next().is(":hidden")) { accordion("slow"); $(this).addClass('open'); $(this).next().show("slow"); } else { accordion("slow"); } });

这是一个小提琴！ 。

Interesting Posts

第二次提交表单，呈现前一个部分以及当前部分

动态加载JavaScript

$ .ajax忽略DELETE请求的数据参数

未捕获的TypeError：$ .post不是函数

为什么ASP.net RadioButtonList onchange客户端事件没有触发？

带参数的jQuery WCF服务MVC2 VS2010 .NET 4.0调用失败

如何使用javascript或jquery获取图像的自然尺寸？

如何从jQuery UI选项卡中打开链接INSIDE表示选项卡

Facebook喜欢并分享ajax上的按钮

使用Firebug将JQuery加载到任何页面中