jQuery：子元素为其父元素触发事件

Question

我有几个这样的嵌套 div 元素：

<div class="main">
    blah blah blah <div class="clickme">clickme</div>
</div>

<div class="main">
    bleh bleh bleh <div class="clickme">clickme</div>
</div>

<div class="main">
    blih blih blih <div class="clickme">clickme</div>
</div>

我想触发一个切换事件，该事件将显示/隐藏标有"main" 类的div，方法是单击其子div 标记内的相应clickme 文本和"clickme" 类。抱歉，我不知道该怎么做。谢谢。

Answer 1

$(".clickme").click(function() {
    $(this).parent("div.main").toggle();
});

关于你的第二个问题，你需要补充：

$(this).unbind('click');

在您的任一切换功能结束时，它将按您的意愿工作。祝你好运。

编辑：针对您的最新问题，应该这样做：

$(".abrefecha").click( function() {
    var that = this; // save this in that :)
    jQuery(this).parent().toggle(
        function () {
            var itemId = jQuery(this).attr("id");
            var itemIndex = $(".showhide").index(this);
            var currentItemHeight = b[itemIndex] + 30 + 'px'
            jQuery(this).css("overflow","auto");
            jQuery(this).animate( { height: currentItemHeight } , 500 );
            $(that).html('close'); // change html inside pink to 'close'
            $(this).unbind('click');
        },
        function () {
            jQuery(this).css("overflow","hidden")
            jQuery(this).animate( { height:"60px" } , 500 );
            $(that).html('abrefecha'); // change html back to 'abrefecha'
            $(this).unbind('click');
        }
    );
});