0

下面是 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，其中标签在鼠标悬停时打开。但我想以我的方式请帮助。

代码笔： https ://codepen.io/anon/pen/dArfH

注意： 我还希望当任何选项卡处于活动状态时，其标题颜色会发生变化。鼠标悬停在任何其他选项卡上时颜色也会发生变化

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

        }
4

2 回答 2

0

看看这个它会有所帮助，因为它是你正在寻找的

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

于 2013-09-26T17:59:45.310 回答
0

查看 Stackoverflow 上提出的这个问题：

CSS 活跃

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

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

于 2013-09-26T16:43:46.720 回答