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

当我点击单词菜单或menu2

时，我正试图让切换工作

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
    }

});

小提琴：http://jsfiddle.net/maniator/V4X4t/5/

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/

这会在点击.hidden元素时显示/隐藏.dim元素，但它也允许您点击.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元素的直接父元素。

Answer 3

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

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

这里是小提琴：http://jsfiddle.net/V4X4t/6/

Answer 4

看一下可能会给你一个想法的this教程

Answer 5

在Menu和Menu2

创建锚点

<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/

jQuery切换div的孩子

5 个答案:

更新