0
"li"であるアコーディオンアイテムの内側の "ul"リストを隠す方法はありますか？JSアコーディオンのネストされたリストを隠す
CODEPENのLINK：http://codepen.io/Steve-Jones/pen/pbVOKj
JS （関数（$）{ $（ 'アコーディオン>のLi：当量（0）A '））addClass（' アクティブ' 次（。。 ）.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;
}