css盘旋在onclick会话上

Question

我想知道是否有人可以帮助我。 我正在尝试创建一个简单的作品集网站，并且我在顶部导航中有这个链接，当点击时会在标题下面出现一个水平菜单。 到目前为止，我已经让它与css一起工作了，但是我不喜欢菜单在悬停时如何显示，如果它在点击时出现并保持在那里直到你再次点击相同的链接，它看起来会更专业。 如果有人能帮助我那将是伟大的。 我已经尝试了各种各样的java教程，并且不会非常成功，我没有完全理解它。

<header>
    <a class="home" href="../index.htm" title="Home Page"></a>
    <a class="to_nav" href="#nav" ></a>
    <div class="logo">
        <a href="#top">
            <h1>Deeran</h1>
            <span>Graphic Design</span>
        </a>
    </div>
    <nav>
        <ul class="drop">
            <li>
                <a id="menu"></a>
                <ul class="hide">
                    <li><a href="#folio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact/Hire</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

这是css

nav {margin: 0; padding: 0;}
nav ul li a#menu {
    display: block;
    width: 67px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-top: 9px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
}

nav ul ul.hide {
    display: none;
    list-style: none;
    margin: 10px 0 0;
    text-indent: none;
    clear: both;
    width: 100%;
    position: absolute;
    left: 0px;
}

nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

如果有一种简单的方法来转换那个：悬停功能到onClick我会非常感激:)

Answer 1

使

nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

至

nav ul li.active > ul {
    display: block;
    list-style-type: none;
    }

然后使用javascript添加一个active onClick类。

太棒了，我们可以轻松地参考类似案例:)

对于javascript部分，请参考这个答案。

添加/删除类onclick与JavaScript没有图书馆

Answer 2

无法使用css监听“click”事件。 删除你的：悬停规则并添加一些JavaScript。 在您提供的代码中，您没有#menu元素中的任何内容供用户单击，因此我为小提琴添加了一些文本。

http://jsfiddle.net/Fc75u/

JavaScript的：

var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
    menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});

jQuery的：

$('#menu').click(function () {
    $('.hide').toggle();
});