Question

我正在尝试实现两个简单的效果：在鼠标上单击显示/隐藏<ul>元素。

有几种方法可以获得这种效果，这里有一个关于jsfiddle的工作示例： http://jsfiddle.net/66y4J/1/

如您所见，仍然存在一些问题：

多个div具有相同的ID。并且只有第一个<div>适用于悬停部分。我想我需要jQuery代码中的一些“上下文”
在点击事件中，它会显示/隐藏所有显示相同ID的<div>。

这是HTML：

<div id="open-on-hover">
<h2>Section Title h2 - Hover</h2>
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
</ul>
</div>

<div id="open-on-click">
<h2>Section Title h2 - Click</h2>
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
</ul>
</div>

jQuery部分：

$('#open-on-hover>ul').hide();

$( "#open-on-hover" ).hover(
    function() {
        $(this).find('ul').show();
    }, function() {
        $(this).find('ul').hide();
});



$('#open-on-click>ul').hide();

$("#open-on-click>h2").click(
    function() {
        $('#open-on-click>h2+ul').toggle();
});

Answer 1

少一点代码：http://jsfiddle.net/kasperoo/66y4J/8/

$( ".hoverReveal" ).hover(
    function() {
        $(this).find('ul').show();
    }, function() {
        $(this).find('ul').hide();
    }
);

<div class="hoverReveal">
<h2>Section Title h2 - Hover</h2>
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
</ul>
</div>

编辑它以减少精神盘旋，但这只是基本的想法：）

Answer 2

适用于现代浏览器的纯CSS解决方案（需要:checked和:hover伪类）。 Demo

HTML

<div class="open-on-hover">
<h2>Section Title h2 - Hover</h2>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
    </ul>
</div>

<div class="open-on-click">
    <label for="trigger1">
        <h2>Section Title h2 - Click</h2>
    </label>
    <input type="checkbox" id="trigger1" class="trigger" />
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
    </ul>
</div>

CSS

.open-on-hover > ul {
    display: none;
}
.open-on-hover:hover > ul {
    display: block;
}
.open-on-click > .trigger {
    display: none;
}
.open-on-click > .trigger:checked + ul {
    display: block;
}
.open-on-click > .trigger + ul {
    display: none;
}

在悬停时切换多个div可见性并单击

2 个答案: