jQuery 切换 div 的子元素

Question

我有以下HTML代码：

<div class="dim">
    Menu
        <div class='hidden'>submenu1</div>
        <div class='hidden'>submenu2</div>
</div>
<div class="dim">
    Menu2
        <div class='hidden'>submenu3</div>
        <div class='hidden'>submenu4</div>
</div>

类名 hidden 具有 display:none

我正在尝试在单击菜单或菜单2上的单词时使切换起作用

- Or Weinberger

Answer 1

$('.dim').click(function(){
    $('.hidden', this).toggle(); // p00f
});

演示代码： http://jsfiddle.net/maniator/V4X4t/

---

更新

检查是否点击了dim元素：

$('.dim').click(function(event){
    
    var isDim = $(event.target).is('.dim');
    if(isDim){ //make sure I am a dim element
        $('.hidden', this).toggle(); // p00f
    }
    
});

Fiddle: http://jsfiddle.net/maniator/V4X4t/5/

- Naftali

---

抱歉，我的帖子有误，我刚刚进行了更正。你能看一下吗？ - Or Weinberger

@hoverhand - 在我编辑后的代码将与您更新的HTML一起正常工作。 - Joseph Silber

@Neal - $('.hidden', this) 内部映射到 $(this).find('.hidden')。但是 $(this).children('.hidden') 更快。如果你更喜欢自己的风格，至少使用子选择器：$('> .hidden', this)。 - Joseph Silber

“dim” div在另一个div中，我也在使用toggle，所以当我尝试点击“dim”类的div时，它会切换到“dim”的父级而不是子菜单。有什么想法吗？ - Or Weinberger

@Neal - 为什么不直接使用 if(event.target === this)？ - Joseph Silber

Answer 2

$('.dim').on('click', function () {
    //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion
    $(this).children('.hidden').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

这里有一个演示：http://jsfiddle.net/76uTr/ 当单击.dim元素时，它会显示/隐藏.hidden元素，但也允许您单击.hidden元素而不切换其可见性。

请注意，我使用了.children()而不是.find()，后者只会选择根元素(.dim)的直接子代。

此外，请注意.on()是jQuery 1.7中的新方法，在这种情况下与.bind()相同。

更新：

使用event.stopPropagation()，我们可以允许自己嵌套元素，而不让事件冒泡并触发多个事件处理程序。

$('.dim').on('click', function (event) {
    event.stopPropagation();
    $(this).children('.hidden').toggle();
});

$('.parent').on('click', function () {
    $(this).children('.dim').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

这里有一个演示：http://jsfiddle.net/76uTr/1/ 在这个示例中，.parent 元素被认为是 .dim 元素的直接父元素。

- Jasper

---

很好，停止抖动的捕捉。但正确的方法是切换类而不是CSS。 - Andreas Louv

Answer 3

只需附加一个点击事件处理程序，并检查当前元素是否为所点击的元素：

$('.dim').click(function(e)
{
    if (e.target == this)
    {
        $(this).children().toggle();
    }
});

这是代码片段链接：http://jsfiddle.net/V4X4t/6/

- Joseph Silber

Answer 4

在菜单和菜单2处创建锚点

<div class="dim">
    <a href="#" >Menu</a>
        <div class='hidden'>submenu1</div>
        <div class='hidden'>submenu2</div>
</div>
<div class="dim">
    <a href="#" >Menu2</a>
        <div class='hidden'>submenu3</div>
        <div class='hidden'>submenu4</div>
</div>

和脚本：

$(".dim > a").click( function ( e ){ 
   e.preventDefault() // prevent default action - hash doesn't appear in url
   $( this ).parent().find( "div" ).toggleClass( "hidden" );
});

点击任何一个属于它的子菜单链接，将会出现或消失

在线演示：http://jsfiddle.net/ZxwpJ/

- abuduba