嵌套的 HTML 列表

Question

我希望将内容放在使用“ul”构建的手风琴下，每个手风琴项目都是自己的“li”。

我的问题是我希望其中一个手风琴项目中的内容包含它自己的“ul”。

解决这个问题的正确方法是什么？

CODEPEN 链接：http://codepen.io/Steve-Jones/pen/pbVOKj

<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>
            <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;
}

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;
}

Answer 1

假设您的意思是如何管理样式内部和外部列表，处理此问题的常用方法是让您的样式如下所示：

.accordion {
 /* styling */
}

.accordion > li {
 /* targets the children of the accordion ONLY */
}

.accordion > li ul {
 /* targets the inner list(s) ONLY */
}

.accordion > li ul > li {
 /* targets the inner list(s) children lis ONLY */
}

Answer 2

给你的ul 一个你可以定位的类。就像：

<ul class="unstyled-list">
<li>List item and stuff</li>
<li>List item and even more stuff</li>
</ul>

我在你的小提琴中试过这个，它有效！

为了给列表设置样式，使用：

.unstyled-list {
    margin: 15px 0;
    background: red;
}
.unstyled-list li {
    list-style: bullet;
}

Answer 3

您当前的标记是有效的，只要将第二个列表放在第一个的列表项内，那么 html 是正确的。

使用以下选择器对其进行样式设置：

.accordion > li ul {
 /* some css styles */
}

如果你觉得更清楚，或者在内部列表中添加一个类：

.accordeon-inner-list > li{
 /* inner list styles */
}