css 悬停到 onclick 对话答案

【问题标题】：css hover to onclick conversationcss 悬停到 onclick 对话
【发布时间】：2014-03-20 06:18:33
【问题描述】：

我想知道是否有人可以帮助我。我正在尝试制作一个简单的作品集网站，我在顶部导航中有此链接，单击该链接时，标题下方会出现一个水平菜单。到目前为止，我已经让它只与 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;
    }

如果有一种简单的方法可以将 :hover 函数转换为 onClick，我将不胜感激 :)

【问题讨论】：

如果您正确设置菜单，悬停比点击更容易访问
@Huangism 我同意，但我只是讨厌触摸设备中的行为
@sabithpocker 是的，对于触摸设备来说，需要 js 来改变行为以使用点击或触摸事件，例如 lexus.ca 上的那个
检查这个线程非常相似：stackoverflow.com/questions/20409319/…

标签： javascript jquery html css onclick

【解决方案1】：

制作

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

到

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

然后使用javascript添加一个类activeonClick。

之所以如此美妙，是因为我们可以轻松参考类似案例：)

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

Add/Remove class onclick with JavaScript no librarys

【讨论】：

我需要的 javascript 是什么？对不起，我对java不是很熟悉
请检查答案中的链接，有一个非常相似的案例。请问有什么不清楚的地方。

【解决方案2】：

不能用 css 监听 'click' 事件。删除您的 :hover 规则并添加一些 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();
});

【讨论】：

我添加了纯 JavaScript 解决方案，因此您不必为添加 jQuery 而烦恼。检查小提琴。