Question

我使用#nav:hover选择器创建了一个带有CSS的下拉菜单，以激活属性和值transition:height

我真正想要发生的事情：当用户点击（而不是悬停）菜单掉落并保持下降后由#nav:hover激活的区域。然后，如果再次单击相同的#nav:hover区域，则菜单会收缩。

经过一些研究，到目前为止我所理解的，我相信我需要使用javascript。我知道除了最基本的基础知识之外的javascript很少。我正在挖掘我能找到的所有相关的javascript，我认为我对这个难题有点点零碎......但是没有任何功能......任何人都知道一个简单明了的方法来实现这个目标吗？

Answer 1

这是一个仅限CSS的解决方案：

DEMO： http://jsfiddle.net/k7HqE/

HTML 的

<!-- This is what is clicked, you can rework it to wrap the #nav if want -->
<label for="toggler">CLICK ME</label>

<!-- Hidden checkbox that gets toggled when the `label` is clicked -->
<input id="toggler" type="checkbox">

<!-- Your unmodified nav -->
<div id="nav">
    <!--logo_image--> <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>

    <!---->
    <div style="height:1em;"></div>
    <div style="font-size:1.1em;"><b>Artists</b>
    </div>
    <div style="height:1em;"></div>
    <!---- AND SO ON ---->
</div>

CSS

/* hide the input */
#toggler { display: none; }

/* transition based on input checked state */
input:checked + #nav {
    height:39em;
}

Answer 2

我想我有一些东西：

Javascript：

document.querySelector("#nav").onclick = function(evt){
    var arClass = this.className.split(" ");
    if(arClass.indexOf("active")>=0){
        this.className = "";   
    } else {
        this.className = "active";
    }
};

备注

indexOf可能无法在每个浏览器中使用（IE7和IE8）。

此功能将替换#nav上的所有课程。

CSS：

#nav:hover,#nav.active{ height:39em; }

http://jsfiddle.net/JFjwJ/

使用JavaScript控制转换

2 个答案: