Question

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

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

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

CODEPEN LINK ：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 */
}

嵌套的HTML列表

3 个答案: