jQuery
确保在 DOM 就绪时运行或在页面底部运行。
(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);HTML
<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>SCSS
如果您不使用 SASS，请抱歉。应该很容易转换。
.accordion {
margin: 50px;
dt, dd {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
&:last-of-type {
border-bottom: 1px solid black;
}
a {
display: block;
color: black;
font-weight: bold;
}
}
dd {
border-top: 0;
font-size: 12px;
&:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}
}
}稍微高级一些，防止关闭活动面板
感谢 Chris。我一直在寻找一个简单、轻量级的 jQueryUI 的替代方案。
很棒的分享，但是两个演示的功能都一样（点击新的面板会关闭上一个）。我认为其中一个演示应该能够同时打开多个面板。
这里有一个稍微修改过的版本的手风琴： http://codepen.io/thirdtiu/pen/uDyxr
打开第一个面板，以指示它是一个手风琴。
并添加了切换打开/关闭选项卡的功能。
这对标签来说效果很好，但是如果我在标签中包含一个图像呢？我添加了一些代码，但是现在当我点击一个 div 时，图像出现/消失，但没有内容（标签）显示。
非常奇怪……这是我使用的代码。希望得到学习 jQuery 的人的帮助！
$(document).ready(function() {
$(‘#skills-services p:not(:first)’).hide();
$(‘#skills-services img:not(:first)’).hide();
$(‘#skills-services h3’).click(function(){
$(‘#skills-services p’).slideUp();
$(‘#skills-services img’).slideUp();
$(this).next(“p”).slideToggle(“normal”)
$(this).next(“img”).slideToggle(“normal”)
return false;
});
});
我尝试更改这段代码块以包含图像，但现在只有图像出现/消失，而内容（标签）却不见了。
非常奇怪，但是这是我使用的代码。希望得到对 jQuery 新手的人的帮助。
使用 div 比如
.accordion {margin: 50px; position : relative; }
.dt, .dd {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
&:last-of-type {
border-bottom: 1px solid black;} }
.a {
display: block;
color: black;
font-weight: bold; }
.dd {
border-top: 0;
font-size: 12px;
&:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
} }
$(function(){
(function($) {
var allPanels = $(‘.dd’).hide();
$(‘.a’).click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
});
哇，不用了.. 我没有关闭标签
这个有演示吗？
它可以折叠到子标题中吗？
所以基本上，如果你有一个标题
例如
> 主要景点 ‘点击它就会下拉到’
> CN 塔 ‘当你点击它时，它会下拉
> ‘CN 塔的简短描述’
这样的功能可以实现吗？
我做了一个，当你点击同一个时，它会向上滑动到下一个… 我确定有一个更简洁的解决方案，但我没有想出来。如果你发布了，请回复一下，谢谢。
要能够再次点击项目来关闭它，只需跟踪上一个项目的內容
如何在 WordPress 的动态导航中使用这个？
谢谢。
这给了我一些关于手风琴的更多想法。
太棒了！ 正是我想要的！
您好，感谢您的教程，正是我想要的。
只有一个问题，我该如何使选项卡可折叠，以便所有选项卡都可以关闭？
我尝试添加 ‘collapsible: true’ 但没有用。
谢谢
我做了这个
对我来说有用…
Gr. Bert
您好,
要避免“跳跃”错误，只需在父 div 上添加：
position : relative;。Fabrice
在定义列表本身添加
position : relative;也可以解决问题，这样你就不需要额外的 div 了 : )我想出了一个更简单的解决方案
你不需要覆盖手风琴的点击函数，因为通过调用 accordion(“activate”, false) 所有部分都会关闭（隐藏有助于用户看不到这些内容）。我还将 collapsible 设置为 true… 不知道是否必要。
它解决了我的问题。
非常感谢。
继续加油…
简单有效！
避免页面跳跃的最佳方法是不使用虚拟链接（a href=”#” 或 a href=””） 根本不需要。a href 有很多 SEO 权重，因此你可能希望使用它们来实际链接到其他页面/网站，而不是触发行为。
要触发行为，可以使用任何其他 HTML 链接，是的，它可以工作，你只需在 CSS 文件中添加“cursor:pointer;” 就行了。是的，这在 IE6 中也能工作。
所以在 Chris 上面的例子中，只需替换
<a href=””></a>
为
<span></span>
嘿 Ricardo,
很好的建议。我 *绝不是* 开发人员，只是在学习这些东西。
你如何使用 span？
<dt><span>\"你如何选择咖啡？\".</span></dt>
或
<dt><span class="spanclass">\"你如何选择咖啡？\".</span></dt>
然后交换
$('.accordion > dt > a').click(function() {
对于
$('.accordion > dt > span').click(function() {
这在 maydaycoffee.com.au 用于常见问题解答。
您好,
不幸的是，“跳跃”仍然存在，至少在 IE7 中，无论是在父级 div 上应用 position: relative; 还是用真实链接或跨度替换虚拟链接，用户都不会清楚地知道这些行是链接的指示。标题必须明确地向用户发出：点击我，我是链接！）。
如果有人能想出一个解决方案来消除这个讨厌的跳跃（包括在 IE7 中），并在此处发布，我将不胜感激。
return false 应该可以阻止跳跃 // 但你也可以使用以下方法：在点击函数中添加一个事件，然后立即阻止默认行为 /
function accordian(){
$(‘.accordian dd’).hide();
$(‘.accordian dt a’).click(function(event){ // <– 添加事件
event.preventDefault(); // <— 阻止跳跃
$('.accordian dt a').click(function(){
$('.accordian dd').slideUp();
$(this).parent().next().slideDown();
});
});
}
关于跳跃……
如果正在进行动画的容器（dd）具有边距或填充，这似乎会大大增加跳跃。
如果你将内容放在 a 中，并将填充放在 a 上而不是 dd 上，这似乎会大大减少跳跃。
文本
哎呀……希望这能奏效 :-/
<dd&rt<p&rtTEXT</p&rt</dd&rt
不……我显然很愚蠢 :-/ 无论如何，只要将 P 放在 DD 中 :-)
我一直都在寻找一个简单的折叠脚本，这可能就是那个。我发现的其他脚本非常复杂，但这个脚本很棒，很轻量，谢谢。
这是一个非常简单和不错的脚本 - http://www.sebastiansulinski.co.uk/demos/jquery-accordion/
嘿，伙计们，这很棒 - 除了 IE7 之外的所有浏览器都支持。
我已经尝试了所有可用的技巧来使其工作，但它就是不工作。有什么提示吗？
我道歉，在几个小时的失眠之后，我尝试了一种新的攻击方式。事实证明，我在我的 Mac 上安装的 IE7（使用 Winebottler）没有加载任何 JavaScript，也无法修改。
脚本仍然按预期完美地工作。
很棒的文章，我正在使用以下代码
现在所有菜单都会同时关闭，我希望一个菜单保持打开，其他菜单保持关闭，如何实现？或者缓慢关闭菜单也可以。
感谢分享……
这是一个关于另一个 jQuery 折叠的链接
http://www.bijusubhash.com/blog/create-a-simple-accordion-with-jquery-and-css
我的天哪！我明白了……非常感谢。
我想知道你是否还在回复这个主题中的任何评论，简单的 jQuery 折叠
谢谢
很棒，简单，谢谢！
你能帮助支持 cookie 并记住打开的 <dt> 吗？
您好，是否可以将此菜单实现为多个 dd 标签？我知道这违反了定义列表……我可以使用 li 标签代替吗？抱歉，我对 jQuery 并不太熟悉，任何帮助将不胜感激。我尝试实现的列表将具有以下结构
感谢大家！
将它们更改为 DIV，并将列表放在里面。:-)
谢谢。来自哥伦比亚的感谢。对我非常有用。
非常感谢。文章非常清晰。
感谢您的教程，它对我的帮助很大。
我遇到了这个代码（最初发布的代码）的一个奇怪的错误。如果你单击菜单项以展开它，它会展开，但如果你单击同一个菜单项以关闭它，它会弹跳关闭，然后再次打开。
有人知道如何关闭这个弹跳吗？
该死，我花了整整一个小时才让它工作，但无法消除它产生的烦人的跳跃。阅读了所有这些评论，但仍然有跳跃……好吧，回到绘图板。肯定有更简单的方法。
将 position : relative; 添加到 .accordion 类中……这解决了跳跃问题
我确认了马兹的修复。谢谢！
很棒的脚本……
有没有办法让折叠中的第一个项目在页面加载时打开，而不是隐藏所有项目？
var allPanels = $(‘.accordion > dd’).hide().slice(1).show();
http://viralpatel.net/blogs/demo/jquery-accordion-menu-example/
我遇到了和乔希（2012 年 1 月 26 日）一样的问题
有人知道如何关闭这个弹跳吗？
最好是能够关闭刚刚打开的菜单项
从链接标签中删除 #，并使用 ‘ href=”js:;” ‘ 代替。
您好！
感谢发布这个很棒的教程，它真的很简单，我只是想知道，是否可以使这个折叠动态工作，例如，如果我在电子商务网站上工作，并且我有多个商品，是否可以在滚动时打开折叠面板以显示商品名称，类似于对折叠面板进行排序。任何帮助都将不胜感激。
抱歉我的英语不好。谢谢
@Josh 和 @Bacca - 你可以使用以下代码解决弹跳打开和关闭的问题
几乎与您的解决方案相似，这对我有用，我将其提交为替代解决方案
感谢戴维！这解决了当你点击一个已打开的选项卡时的问题
哇，戴维，你用一行简单的代码就解决了我的问题，可以用它来关闭每个项目！太棒了！
嗨，戴维，
感谢您抽出时间查看这个问题，不幸的是，我尝试了这个解决方案，但没有成功。
当页面加载时，所有 dds 都处于打开状态，单击 dts 中的链接没有任何作用？
有什么想法吗？
嘿，巴卡，
如果你复制粘贴了我的上一条评论，格式会创建一个不正确的 ” ‘ ” 字符。我在 jsfiddle 上分叉了之前的演示，网址是
http://jsfiddle.net/8MXAu/
试试这个。我在 jsfiddle 上测试过，它工作正常。这也假设你正在使用与示例相同的 HTML 和 CSS。
感谢戴维，它工作得很好，而且我使用了与克里斯不同的 css。我将 scss 更改为旧格式，然后从那里更改以适应我的主题。再次感谢！
感谢戴维！它工作得很好，并且解决了弹跳问题 :)
感谢您提供此代码！
Davey-
我刚刚看到了这个演示。原版工作正常，除了你修复的“跳跃”问题完全破坏了它。你知道为什么会出现这种情况吗？
嗨 Jon，
看看这里的 jsfiddle 链接
http://jsfiddle.net/8MXAu/
如果你从我之前的评论中复制了修复代码，它就会出现问题，因为有一个无效的 ‘ 字符。你是这样测试的吗？
谢谢 Davey，
我在复制之后就注意到了无效的字符，以为已经把它们都改了，但一定是漏掉了。
无论如何，我从头开始输入代码（一开始就应该这样），现在它完美地工作了，非常感谢。
非常感谢，伙计。你的修复代码有效。干杯！
这个代码片段对我帮助很大。感谢分享。
我不是 jQuery 专家，
需要在 6 列中创建多个手风琴，有什么想法吗？我的 jsfiddle 链接是 http://jsfiddle.net/FL7q3/
这很棒！
如何一次只显示一个面板？
有什么方法可以添加 window.scrollTo 吗？我对 Javascript/jQuery 不太熟练，所以我不确定该把它放在哪里。
我尝试了这个方法，以便在打开后允许手风琴选项卡 (dt) 可折叠
这是最好的手风琴演示之一。简洁明了。
不错的教程……
有人将 [+] 和 [-] 整合到这个手风琴中吗？无论是通过 Javascript 还是图片？
如果有人这么做就太棒了……！
嗨 MP，
我用加号和减号制作了我的手风琴，但其中有一个小错误。当我点击图标时，图标会跳动。有什么解决图标跳动问题的办法吗？
Krish
我无法让它工作。主要是因为我是个新手，不知道用 jquery 替换 $。
此外，我使用的 jQuery lightbox 魔法导致了冲突。
以下是解决方法。
我让我的朋友 我开发用的朋友（他很厉害）来修复这个，我们现在在 maydaycoffee.com.au 上使用了这个功能。
使用的 jQuery 是
CSS 代码如下。我从 SCSS 转换而来。正如我所说，我不是开发人员/设计师，所以我的语法和语义可能很烂。
太棒了，这完美地解决了问题。感谢分享这个解决方案！
太棒了！！！这是制作一个非常简单的 jQuery 手风琴的酷代码。
上帝保佑你，Chris！
嗨，只是个小问题。我试图将选择器更改为 ul 和 li，而不是 dd dl 等等。但它似乎不起作用。有什么想法吗？
提前感谢！
/Jeppe
再次问好，
忘记我之前的问题吧。我通过实际关闭所有元素解决了它：）
但是我还有另一个问题。如果想要让点击的面板滚动到顶部或进入视图，我该如何从你的代码中实现？
感谢！
/Jeppe
您好,
对于那些正在寻找法语手风琴教程的人，这里有一个很棒的教程： http://netmacom.fr/blog/webdesign/creer-un-menu-accordeon-avec-jquery.html
为了让第一个显示出来（之前有人发布的解决方案不起作用）。
我做了
呃，忽略之前的帖子，它会导致错误。
只需在 var allPanels 行下面添加这行代码即可
它可以用作基础，但不能用作高级功能。
这是我制作的最简单的版本的手风琴。你可以随意设置样式。h3 可以替换为任何内容……
JQuery (Javascript):
$(document).ready(function() {
$(‘[id^=aContent]’).hide();
$(‘[id^=aContent]’).prev().click(function() {
$(‘[id^=aContent]’).hide(300);
if ($(this).next().is(“:visible”))
$(this).next().hide(300);
else
$(this).next().show(300);
});
});
CSS:
.aHeaders {/* 在这里设置你的手风琴标题样式…… */}
.aContents {/* 在这里设置你的手风琴内容样式…… */}
HTML:
<h3 class=”aHeaders”><a href=”#aContent1″>标题 1</a></h3>
<div class=”aContents” id=”aContent1″>
内容 1
</div>
<h3 class=”aHeaders”><a href=”#aContent2″>标题 2</a></h3>
<div class=”aContents” id=”aContent2″>
内容 2
</div>
<h3 class=”aHeaders”><a href=”#aContent3″>标题 3</a></h3>
<div class=”aContents” id=”aContent3″>
内容 3
</div>
干杯！
-Pierre-
我编辑了 Pierre 的片段，以允许在加载时显示第一个元素。
$(‘[id^=aContent]’).hide();
$(‘[id^=aContent]’).first().show();
$(‘[id^=aContent]’).prev().click(function() {
$(‘[id^=aContent]’).hide(500);
if ($(this).next().is(“:visible”)){
$(this).next().hide(500);
} else {
$(this).next().show(500);
}
});
干杯
@Kevin：如果你想同时打开多个
dd元素，请这样做太棒了——感谢 Chris。
我为 dt 添加了一个 active 类。我不是 jQuery 大神，所以对于那些可能改进这个代码的人，提前感谢！
你可以使用 JQuery “.accordion()” 函数来进一步简化它。因为除了使用 CSS 设计之外，你不需要做太多事情。你只需要在容器内放置几个元素，剩下的就让 JQuery 完成吧。
就这么简单。
你的教程让我开始使用 SASS。谢谢！
我成功了！虽然有一点没有正常工作，我似乎无法解决。当我点击一个面板时，描述会打开，但打开时宽度变小了。加载完成后，它会恢复到完整长度。我该如何解决这个问题？ http://michellecantin.ca/test/features/accordions/
嗨，我该如何在手风琴中构建一个手风琴？请帮忙！谢谢！
你需要使用嵌套列表。
很棒，第一次就成功了，我甚至在第一次尝试时就成功地将 CSS 转换回“正常”状态。我使用这个手风琴来制作一个常见问题解答部分。对于那些不熟悉 sass 的人，这里是我使用的 CSS，它与 sass 很相似，但毫无疑问，有人会因为那个 “&” 搞混。
嗨，大家好，
有人能解释一下代码中的这一行吗？
$(this).parent().next().slideDown();
如果 (this) 指的是 $(‘.accordion > dt > a’)，那么那行代码不是指每个面板的标题，而是指面板中需要显示的文本段落吗？
我还不清楚为什么需要用这个：(function($) { })(jQuery); 来包裹整个函数才能使其正常工作。
感谢！
‘this’ 始终指的是当前对象，要弄清楚它是什么，可以使用
console.log( “what is this? ” + $(this).parent() );
在您引用的代码行之前或之后，然后查看控制台中的输出。我认为在手风琴中，它是被点击对象的父级 > 该父级的下一个兄弟元素。所以是下一个将“打开”的元素的开头。
您的第二个问题在这里得到了解答
stack overflow，Vivin Paliath 的回答 - 向下滚动即可找到答案
使其在打开时不可点击
$j(‘.accordion > dt > a’).click(function() {
allPanels.slideUp();
if($j(this).parent().next().css(‘display’) != ‘block’){
$j(this).parent().next().slideDown();
return false;
}
});
有人知道如何使“打开的抽屉”能够关闭吗？我在网站上用这个功能来做课程，我的老师因为“打开的抽屉”无法关闭而扣分。
提前感谢您的帮助！
如果您指的是所有手风琴部分都应该在启动时关闭，您可以执行以下操作
var allPanels = $( '.accordion > dd' ).hide();这应该隐藏所有具有 .accordion 类的元素的内容。要在加载时只显示第一个，请在该行代码之后添加
$('.accordion > dd').first().show();如何向其中添加加号减号？
感谢！
向要添加 +- 图标的元素添加一个类，然后使用类似以下代码；
css
.notselected{
background: url(‘plusIcon.png) no-repeat;
background-position{ 98% 50%; /* horiz, vert */
}
在主 js/jquery 函数中
var allHeaders = $(‘h1.accHeader’).addClass(‘notselected’);
$(allHeaders).first().removeClass(‘notselected’);
其中 h1.accHeader（在我的代码中）是一个可点击的标题（示例中的 dt.a）
然后在您的 onclick 函数中，您需要反转它
allHeaders.addClass(‘notselected’);
$(this).removeClass(‘notselected’);
很棒的代码片段，谢谢。有人在移动设备上测试过这个功能吗？在 iPhone 5 上效果很好。我问这个问题是因为这将是移动菜单的一个很好的解决方案。
Sam
感谢你的分享，哥们。
它在分页方面存在一些问题......当您使用分页转到下一页时，它无法正常工作。
我知道这篇文章现在已经很旧了，但我仍然想说声谢谢，这篇文章写得很好，评论也是金矿。
使用 Promise
感谢 Chris，这真是太轻量级了，而且易于实现！
这里有一个我刚完成的全页水平手风琴 -> http://codepen.io/dcdev/full/azvGwm/
感谢 Chris！喜欢它的简单性。我已经修改了这个示例，以包含一个无 js 备用方案，该方案也通过 CSS 隐藏元素，以避免由于通过 jQuery 隐藏元素而导致的未经样式化的内容闪烁。
查看 Pen zxqExq，作者是 Peter Sorensen (@ptrsrsn)，发布于 CodePen。
我想在手风琴中添加箭头，当网站加载时，所有面板显示向右箭头，当我点击一个面板时，它显示向下箭头。
我该怎么做呢？
我有更好的脚本。
$( document ).ready(function() { var allHeaders = $('.accordion dt'); var allPanels = $('.accordion dd'); allPanels.hide(); $('.accordion dt').click(function() { allHeaders.not($(this)).removeClass('open'); allPanels.slideUp(); if (!$(this).hasClass('open')) { $(this).next('dd').slideDown(); $(this).addClass('open'); } else { $(this).removeClass('open'); } return false; }); });要嵌套多个手风琴实例，一个在另一个里面，用下面的代码行替换对 allPanels.slideUp();（在原始代码中）的调用
// allPanels.slideUp(); $(this).closest("dl").find("dd").slideUp();简单易用，但我更喜欢这种功能
(function($) {
var allPanels = $(‘.accordion > dd’).hide();
$(‘.accordion > dt > a’).click(function() {
allPanels.not($(this).parent().next()).slideUp();
$(this).parent().next().slideToggle();
return false;
});
})(jQuery);
Gracias !!!
一个问题......当我在手风琴上点击指向相关选项卡的锚链接时......屏幕会下拉到底部，在 chrome 中......无论我将 放置在什么位置。
嗨，这是我到目前为止找到的最好的代码。我目前正在寻找一个补充，使面板在点击下一个时返回顶部，而不是停留在底部。
如果有人有想法，我会非常非常感谢！
您好！
感谢您发布这个很棒的教程，它真的很简单，我只是想知道，是否可以使这个手风琴动态工作？
我使用这段代码与“平滑滚动”https://css-tricks.cn/snippets/jquery/smooth-scrolling/ 结合使用，以滚动优化较长的面板。谢谢！
我使用的是“Tabs – Responsive Tabs with Accordions”插件，我希望只在移动网站（自适应）中关闭所有选项卡，因为它默认显示第一个选项卡。我不懂 CSS 或 HTML 代码，所以，有人可以帮助我吗？我真的很感激。
提前感谢
Virginia
如果我想点击已打开的手风琴将其关闭怎么办？
$('.accordion-header').on('click', function() {console.log('clicked!')
allPanels.slideUp();
if(!$(this).next().is(':visible'))
{
$(this).next().slideDown();
}
return false;
});
喜欢这个手风琴。非常轻量级且可自定义。我该如何调整它以支持隐藏部分中的超链接？目前，所有超链接都消失了，我猜测是因为“$(‘.accordion > dt > a’).click(function() {”。我应该如何更改它才能允许每个部分中的超链接？
感谢您提供这个超轻量级且易于使用的解决方案。许多人将 3MB 的 WordPress 插件放到网站中，而不是使用像这样的超级简单的代码，只是为了实现相同的效果。使用 dl/dt 也是一个好主意。
感谢 Chris。它帮助我解决了我的手风琴问题。