当单击父项时，如何在jQuery手风琴菜单中同时打开父项的子项和子项？ [英] How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?
本文介绍了当单击父项时，如何在jQuery手风琴菜单中同时打开父项的子项和子项？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用这个jQuery插件进行多级手风琴菜单： http://codepen.io/anon/ pen / BNqvvB
我有一些编程知识，但对jQuery非常新，不知道。我想要完成的是对于孩子< h4>和孩子< p>部分滑动打开，当父< h3>单击。原始代码只打开< h4>当< h3>父项，而不是子子项< p> ;.
这是有意义的，如果菜单被用来显示多个选项在较低的子级（例如插件HTML显示标题的新闻故事），但在我的情况下，我使用菜单在父级别显示单个故事，在子级别显示其风格文本和段落。这意味着让用户点击flavor文本来查看文本段落是没有意义的。
在这种情况下，一旦有人点击故事的标题在< h3>中，我想要在< h4>和从< p>的故事中的段落以同时显示该点击。
如何完成此操作？
jQuery
var headers = [H1，H2，H3，H4，H5，H6];
$（。accordion）。click（function（e）{
var target = e.target，
name = target.nodeName.toUpperCase（）;
if（$。inArray（name，headers）> -1）{
var subItem = $（target）.next（）;
// slideUp all元素（除目标）在当前深度或更大
var depth = $（subItem）.parents（）。length;
var allAtDepth = $（。accordion p，.accordion div）。filter function（）{
if（$（this）.parents（）。length> = depth&& this！== subItem.get（0））{
return true;
}）;
$（allAtDepth）.slideUp（fast）;
// slideToggle目标内容并根据需要调整下边框
subItem。 slideToggle（fast，function（）{
$（。accordion：visible：last）。css（border-radius，0 0 10px 10px）;
}）;
$（target）.css（{border-bottom-right-radius：0，border-bottom-left-radius：0}）;
}
}）;
HTML
< link href ='http：//fonts.googleapis.com/css？family = News + Cycle：400,700'rel ='stylesheet'type ='text / css' ;
< link href =http://fonts.googleapis.com/css?family=Lobster =stylesheettype =text / css>
< aside class =accordion>
< h1>新闻< / h1>
< div class =opened-for-codepen>
< h2>新闻项目＃1< / h2>
< div class =opened-for-codepen>
< h3>新闻项目＃1a< / h3>
< div>
< h4>新闻子项1< / h4>
<！ - WOULD BECOMEStory 1 passage text - >
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< link href ='http：//fonts.googleapis.com/css？family = News + Cycle：400,700'rel ='stylesheet'type ='text / css'>
< link href =http://fonts.googleapis.com/css?family=Lobster =stylesheettype =text / css>
< aside class =accordion>
<！ - 示例如何使用菜单项/标题--->
< h1>新闻< / h1><！ - WOULD BECOMEAct 1 - >
< div class =opened-for-codepen>
< h2>新闻项目＃1< / h2><！ - WOULD BECOMEStory Arc 1 - >
< div class =opened-for-codepen>
<！ - CLICKING< H3> WOULD OPEN< H4> AND< P>
< h3>新闻项目＃1a< / h3><！ - WOULD BECOMEStory 1 by Author 1 ¥b $ b< div>
<！ - WOULD OPEN WHEN< H3> IS CLICKED - >
< h4>新闻子项1< / h4><！ - WOULD BECOMEStory 1 flavor text - >
<！ - 也将开启< H3> IS CLICKED - >
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h3>新闻项目＃1b< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h3>新闻项目＃1c< / h3>
< div class =opened-for-codepen>
< h4>新闻子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>新闻子项2< / h4>
< p class =opened-for-codepen> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< h2>新闻项目＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>新闻项目＃3< / h2>
< div>
< h3>新闻项目＃3a< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h3>新闻项目＃3b< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< h1>更新< / h1>
< div>
< h2>更新＃1< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃3< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃4< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h1>杂项< / h1>
< div>
< h2>杂项。 ＃1< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>杂项。 ＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>杂项。 ＃3< / h2>
< div>
< h3>杂项。项目＃1a< / h3>
< div>
< h4>杂项。子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项2< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项3< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h3>杂项。项目＃2a< / h3>
< div>
< h4>杂项。子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项2< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< / div>
< / aside>
< script src =// ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"> ;</script>
< h3>新闻项目＃1b< / h3>
< div>
< h4>新闻子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>新闻子项2< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h3>新闻项目＃1c< / h3>
< div class =opened-for-codepen>
< h4>新闻子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>新闻子项2< / h4>
< p class =opened-for-codepen> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< h2>新闻项目＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>新闻项目＃3< / h2>
< div>
< h3>新闻项目＃3a< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h3>新闻项目＃3b< / h3>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< h1>更新< / h1>
< div>
< h2>更新＃1< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃3< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>更新＃4< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h1>杂项< / h1>
< div>
< h2>杂项。 ＃1< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>杂项。 ＃2< / h2>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h2>杂项。 ＃3< / h2>
< div>
< h3>杂项。项目＃1a< / h3>
< div>
< h4>杂项。子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项2< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项3< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< h3>杂项。项目＃2a< / h3>
< div>
< h4>杂项。子项1< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< h4>杂项。子项2< / h4>
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
< / div>
< / div>
< / div>
< / aside>
< script src =// ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"> ;</script>
CSS
* {
margin：0; padding：0;
}
body {
font-size：100％;
}
.accordion {
width：380px;
margin：20px auto;
}
。手风琴h1，h2，h3，h4 {
cursor：pointer;
}
。手风琴h2，h3，h4 {
font-family：新闻周刊;
}
.accordion h1 {
padding：15px 20px;
background-color：＃333;
font-family：Lobster;
font-size：1.5rem;
font-weight：normal;
color：＃1abc9c;
}
.accordion h1：hover {
color：＃4afcdc;
}
.accordion h1：first-child {
border-radius：10px 10px 0 0;
}
.accordion h1：last-of-type {
border-radius：0 0 10px 10px;
}
.accordion h1：not（：last-of-type）{
border-bottom：1px dotted＃1abc9c;
}
.accordion div，.accordion p {
display：none;
}
.accordion h2 {
padding：5px 25px;
background-color：＃1abc9c;
font-size：1.1rem;
color：＃333;
}
.accordion h2：hover {
background-color：＃09ab8b;
}
.accordion h3 {
padding：5px 30px;
background-color：＃b94152;
font-size：.9rem;
color：#ddd;
}
.accordion h3：hover {
background-color：＃a93142;
}
.accordion h4 {
padding：5px 35px;
background-color：＃ffc25a;
font-size：.9rem;
color：＃af720a;
}
.accordion h4：hover {
background-color：＃e0b040;
}
.accordion p {
padding：15px 35px;
background-color：#ddd;
font-family：Georgia;
font-size：.8rem;
color：＃333;
line-height：1.3rem;
}
.accordion .opened-for-codepen {
display：block;
}
我添加了这个：
p>
$（'h3'）click（function（）{
$（this）.next .find（'p'）。show（）;
}）;
并注释：
$（allAtDepth）.slideUp（fast）;
似乎适合我：）
I am using this jQuery plugin for a multilevel accordion menu: http://codepen.io/anon/pen/BNqvvB
I have some programming knowledge but am very new to jQuery and don't know it very well. What I want to accomplish is for the child <h4> and child <p> sections to slide open, when the parent <h3> is clicked. The original code only opens the <h4> child when <h3> parent is clicked and not the sub-child <p>.
This makes sense if the menu is being used to display multiple options at the lower child level (for instance the plugin HTML displays titles of news stories), but in my case, I am using the menu to display individual stories at the parent level and their flavor text and passage at the child level. This means making the user click on the flavor text to view the passage text doesn't make sense.
That being the case, once someone clicks the title of the story placed in <h3>, I want both the flavor text in <h4> and a passage from the story in <p> to display simultaneously on that click.
How can I accomplish this?
jQuery
var headers = ["H1","H2","H3","H4","H5","H6"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if($.inArray(name,headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content and adjust bottom border if necessary
subItem.slideToggle("fast",function() {
$(".accordion :visible:last").css("border-radius","0 0 10px 10px");
});
$(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
}
});
HTML
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<aside class="accordion">
<h1>News</h1>
<div class="opened-for-codepen">
<h2>News Item #1</h2>
<div class="opened-for-codepen">
<h3>News Item #1a</h3>
<div>
<h4>News Subitem 1</h4>
<!--WOULD BECOME "Story 1 passage text"-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<aside class="accordion">
<!--EXAMPLE OF HOW I WANT TO USE MENU ITEMS/HEADERS--->
<h1>News</h1><!--WOULD BECOME "Act 1"-->
<div class="opened-for-codepen">
<h2>News Item #1</h2><!--WOULD BECOME "Story Arc 1"-->
<div class="opened-for-codepen">
<!--CLICKING <H3> WOULD OPEN <H4> AND <P>-->
<h3>News Item #1a</h3><!--WOULD BECOME "Story 1 by Author 1"-->
<div>
<!--WOULD OPEN WHEN <H3> IS CLICKED-->
<h4>News Subitem 1</h4><!--WOULD BECOME "Story 1 flavor text"-->
<!--WOULD ALSO OPEN WHEN <H3> IS CLICKED-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>News Item #1b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>News Item #1c</h3>
<div class="opened-for-codepen">
<h4>News Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 2</h4>
<p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h2>News Item #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>News Item #3</h2>
<div>
<h3>News Item #3a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>News Item #3b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h1>Updates</h1>
<div>
<h2>Update #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h1>Miscellaneous</h1>
<div>
<h2>Misc. #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #3</h2>
<div>
<h3>Misc. Item #1a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>Misc. Item #2a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</aside>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<h3>News Item #1b</h3>
<div>
<h4>News Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>News Item #1c</h3>
<div class="opened-for-codepen">
<h4>News Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 2</h4>
<p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h2>News Item #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>News Item #3</h2>
<div>
<h3>News Item #3a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>News Item #3b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h1>Updates</h1>
<div>
<h2>Update #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h1>Miscellaneous</h1>
<div>
<h2>Misc. #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #3</h2>
<div>
<h3>Misc. Item #1a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>Misc. Item #2a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</aside>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
CSS
* {
margin: 0; padding: 0;
}
body {
font-size: 100%;
}
.accordion {
width: 380px;
margin: 20px auto;
}
.accordion h1, h2, h3, h4 {
cursor: pointer;
}
.accordion h2, h3, h4 {
font-family: "News Cycle";
}
.accordion h1 {
padding: 15px 20px;
background-color: #333;
font-family: Lobster;
font-size: 1.5rem;
font-weight: normal;
color: #1abc9c;
}
.accordion h1:hover {
color: #4afcdc;
}
.accordion h1:first-child {
border-radius: 10px 10px 0 0;
}
.accordion h1:last-of-type {
border-radius: 0 0 10px 10px;
}
.accordion h1:not(:last-of-type) {
border-bottom: 1px dotted #1abc9c;
}
.accordion div, .accordion p {
display: none;
}
.accordion h2 {
padding: 5px 25px;
background-color: #1abc9c;
font-size: 1.1rem;
color: #333;
}
.accordion h2:hover {
background-color: #09ab8b;
}
.accordion h3 {
padding: 5px 30px;
background-color: #b94152;
font-size: .9rem;
color: #ddd;
}
.accordion h3:hover {
background-color: #a93142;
}
.accordion h4 {
padding: 5px 35px;
background-color: #ffc25a;
font-size: .9rem;
color: #af720a;
}
.accordion h4:hover {
background-color: #e0b040;
}
.accordion p {
padding: 15px 35px;
background-color: #ddd;
font-family: "Georgia";
font-size: .8rem;
color: #333;
line-height: 1.3rem;
}
.accordion .opened-for-codepen {
display: block;
}
解决方案 I added this:
$('h3').click(function(){
$(this).next('div').find('p').show();
});
and commented this out:
$(allAtDepth).slideUp("fast");
Here is the full code on CodePen
Seems to work for me :)
这篇关于当单击父项时，如何在jQuery手风琴菜单中同时打开父项的子项和子项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
