jquery - 在悬停和单击时切换多个 div 可见性

Question

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

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

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

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

这是 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>

对其进行编辑以减少心理悬停，但这只是基本想法:)