JS隐藏Accordion中的嵌套列表
JS Hide Nested List in Accordion
如何将内部"ul"列表隐藏在"li"的手风琴项目中?
CODEPEN链接:http://codepen.io/Steve-Jones/pen/pbVOKj
JS(函数($){$('.accordon>li:eq(0)a').addClass('active').next().slideDown();
$('.accordion a').click(function(j) {
var dropDown = $(this).closest('li').find('p');
$(this).closest('.accordion').find('p').not(dropDown).slideUp();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).closest('.accordion').find('a.active').removeClass('active');
$(this).addClass('active');
}
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
})(jQuery);
HTML
<ul class="accordion">
<li>
<a>FAQ: Vegetarian-Friendly Diet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
</li>
<li>
<a>FAQ: Snacking at Work</a>
<p>What are some convenient things that I can snack on while at work?</p>
<p>Most major grocery chains and specialty grocers sell pre-cut veggies. These typically include a variety of peppers, cucumbers, broccoli florets, cauliflower, the microwaved heart of your office nemesis. Wait, the lawyers say we have to strike that last
one. Most of these same stores also carry pre-packaged cherry tomatoes. All of those veggies are convenient to snack on throughout the day. And feel free to add the low-fat or fat/sugar free flavor enhancer of your choice and have at it. The only downside
to this pre-cut veggie option is that pre-cut/packaged veggies are slightly more expensive than buying your veggies whole and cutting them yourself.</p>
<p>Here are a few other, convenient, non-veggie ideas:</p>
<ul class="accordion-inner-list">
<li>Powdered peanut butter, like PB2, adds a ton of flavor to celery which is again easy to snack on</li>
<li>Tuna straight out of the pouch is easy. You can mix it with non-fat greek yogurt, mustard, or avocado</li>
<li>If you have a boat, and an extra 10 hours in your workday, go fishing for the real thing</li>
<li>Individually packaged plain (0% fat) greek yogurt is easy to keep at your desk</li>
<li>Almonds, walnuts, and pistachios (come the season) are easy to store in your desk; they can also be used as projectiles in case an office food fight breaks out</li>
<li>Protein shake; or if you have access to a blender and ice, you can make a ManUP-approved smoothie (feel free to add in oats too for a carb serving)</li>
</ul>
</li>
<li>
<a>FAQ: Food Burnout</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
</li>
</ul>
<!-- / accordion -->
CSS
.accordion {
max-width: 560px;
margin: 0 auto 100px;
border-top: 1px solid #d9e5e8;
}
.accordion li {
border-bottom: 1px solid #d9e5e8;
position: relative;
}
.accordion li p {
display: none;
padding: 10px 25px 30px;
color: #6b97a4;
}
.accordion a {
width: 100%;
display: block;
cursor: pointer;
font-weight: 600;
line-height: 3;
font-size: 14px;
font-size: 0.875rem;
text-indent: 15px;
user-select: none;
}
.accordion a:after {
width: 8px;
height: 8px;
border-right: 1px solid #4a6e78;
border-bottom: 1px solid #4a6e78;
position: absolute;
right: 10px;
content: " ";
top: 17px;
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.accordion p {
font-size: 13px;
font-size: 0.8125rem;
line-height: 2;
padding: 10px;
}
/* ul li ul {
display: none;
} */
a.active:after {
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
您可以使用切换:
$(function () {
(function($) {
$('.accordion > li:eq(0) a').addClass('active').next().slideDown();
// start with toggling the ul.accordion-inner-list
$('.accordion').find('ul.accordion-inner-list').toggle();
$('.accordion a').click(function(j) {
var dropDown = $(this).closest('li').find('p');
$(this).closest('.accordion').find('p').not(dropDown).slideUp();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).closest('.accordion').find('a.active').removeClass('active');
$(this).addClass('active');
}
// before or after slideToggle you need to toggle also this element
// if this element (ul.accordion-inner-list) does not exist
// jQuery does nothing, so don't worry
$(this).closest('li').find('ul.accordion-inner-list').toggle();
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
})(jQuery);
});
.accordion {
max-width: 560px;
margin: 0 auto 100px;
border-top: 1px solid #d9e5e8;
}
.accordion li {
border-bottom: 1px solid #d9e5e8;
position: relative;
}
.accordion li p {
display: none;
padding: 10px 25px 30px;
color: #6b97a4;
}
.accordion a {
width: 100%;
display: block;
cursor: pointer;
font-weight: 600;
line-height: 3;
font-size: 14px;
font-size: 0.875rem;
text-indent: 15px;
user-select: none;
}
.accordion a:after {
width: 8px;
height: 8px;
border-right: 1px solid #4a6e78;
border-bottom: 1px solid #4a6e78;
position: absolute;
right: 10px;
content: " ";
top: 17px;
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.accordion p {
font-size: 13px;
font-size: 0.8125rem;
line-height: 2;
padding: 10px;
}
/* ul li ul {
display: none;
} */
a.active:after {
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<ul class="accordion">
<li>
<a>FAQ: Vegetarian-Friendly Diet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
</li>
<li>
<a>FAQ: Snacking at Work</a>
<p>What are some convenient things that I can snack on while at work?</p>
<p>Most major grocery chains and specialty grocers sell pre-cut veggies. These typically include a variety of peppers, cucumbers, broccoli florets, cauliflower, the microwaved heart of your office nemesis. Wait, the lawyers say we have to strike that last
one. Most of these same stores also carry pre-packaged cherry tomatoes. All of those veggies are convenient to snack on throughout the day. And feel free to add the low-fat or fat/sugar free flavor enhancer of your choice and have at it. The only downside
to this pre-cut veggie option is that pre-cut/packaged veggies are slightly more expensive than buying your veggies whole and cutting them yourself.</p>
<p>Here are a few other, convenient, non-veggie ideas:</p>
<ul class="accordion-inner-list">
<li>Powdered peanut butter, like PB2, adds a ton of flavor to celery which is again easy to snack on</li>
<li>Tuna straight out of the pouch is easy. You can mix it with non-fat greek yogurt, mustard, or avocado</li>
<li>If you have a boat, and an extra 10 hours in your workday, go fishing for the real thing</li>
<li>Individually packaged plain (0% fat) greek yogurt is easy to keep at your desk</li>
<li>Almonds, walnuts, and pistachios (come the season) are easy to store in your desk; they can also be used as projectiles in case an office food fight breaks out</li>
<li>Protein shake; or if you have access to a blender and ice, you can make a ManUP-approved smoothie (feel free to add in oats too for a carb serving)</li>
</ul>
</li>
<li>
<a>FAQ: Food Burnout</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
</li>
</ul>
<!-- / accordion -->
$('.accordion li ul').hide();
这意味着ul
在li
内,它在具有accordion
类的元素内。
相关文章:
- 默认情况下折叠和展开嵌套列表
- 在 Joomla (1.7.0) 中单击时显示嵌套列表
- ReactJs - 列表组件中的嵌套列表组件
- Extjs 4-associations hasMany不在loadData上加载嵌套列表
- 在AngularJS 1.5.x中嵌套列表并更正ng模型和ng值
- Javascript-嵌套列表获胜't展开
- 基于类名创建嵌套列表
- AngularJS:具有任意深度的嵌套列表
- 如何在sencha touch中获取嵌套列表
- 限制要在嵌套列表jQuery中添加的列表元素的数量
- 简单的层次结构与jQuery移动嵌套列表+挖空.js
- 隐藏嵌套列表的非活动同级
- 动态嵌套列表:单击时插入行,在当前元素之后
- jQuery将xml解析为嵌套列表
- 煎茶触摸 2:在选项卡面板内创建嵌套列表
- 悬停和嵌套列表 :悬停的元素
- 如何防止嵌套列表的点击事件
- jQuery 移动嵌套列表视图奇怪的行为 + 后退按钮退出
- 使用 jQuery 从 JSON 创建动态嵌套列表
- 在 React js 中打开和关闭递归嵌套列表