Question

下面是HTML代码，我想使用CSS制作手风琴，没有jquery ，当页面加载第一个标签时默认打开当我点击另一个标签时它的div将会打开和上一个打开的标签会自动关闭。

<div id="wrap">


        <ul id="accordion">
            <li>
                <h2>Title One</h2>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                </div>
            </li>
            <li>
                <h2>Title Two</h2>
                <div class="content">
                    Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
                </div>
            </li>
            <li>
                <h2>Title Three</h2>
                <div class="content">
                    Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </div>
            </li>
            <li>
                <h2>Title Four</h2>
                <div class="content">
                    Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </li>
        </ul>

    </div><!-- wrap -->

下面是我正在使用的CSS，其中鼠标悬停时打开选项卡。但是我想要帮助我。请帮助。
注意
我也希望当任何标签处于活动状态时，其标题颜色会发生变化。鼠标悬停在任何其他标签颜色上也会发生变化

#wrap{
            margin-left:5px;
  margin-top:5px;
            width: 100px;
        }

        #accordion{
            width: 200px;
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        #accordion h2{
            font-size: 10pt;
            margin: 0px;
            padding: 5px;
            background: #ccc;
            border-bottom: 1px solid #fff;
  cursor:pointer;
        }
        #accordion li div.content{
            display: none;
            padding:5px;
            background: #f9f9f9;
            border: 1px solid #ddd;
        }

        #accordion li:hover div.content{
            display: inherit;

        }

Answer 1

查看Stackoverflow上提出的问题：

CSS active

基本上，您可以将第一个菜单设置为使用常规css规则显示。如果要切换菜单，可以使用<button>whatever</button>或<a href="#">whatever</a>标签并更改每个按钮的css活动规则，以隐藏所有其他菜单，但单击该菜单。（如上面的链接所示）

这样做的缺点是你失去了浏览器兼容性，因为它是最新的css规则。如果您希望保持兼容性，我建议您切换到javascript菜单。

Answer 2

看看它会有所帮助，因为它正是你要找的东西

http://tympanus.net/Tutorials/CSSClickEvents/index.html

手风琴使用CSS

2 个答案: