Question

我有这个HTML

<div class="accordion">
    <div class="accordion_header">
        <h1>Header Title</h1>
        <button>sample button</button>
    </div>
    <div class="accordion_content">
        <p>accordion content</p>
    </div>
</div>

和这个脚本

$(".accordion .accordion_header").click(function(e){
    if (e.target !== this)return;
    var $sub = $(this).next('.accordion_content').stop(true, true);
    if ($sub.is(':visible')) {
        $sub.slideUp();
    } else {
        $sub.slideDown();
    }         
});

从上面的参考中可以看出，函数（slideDown，slideUp thing）只会在父（.accordion_header）被点击时触发，并且不会触发它的子节点（当它点击时），但是，我怎么能使它触发函数（slideUp，.adcordion_content的slideDown东西）只允许父“.accordion_header”及其子h1？

任何帮助，建议，推荐，想法，线索将不胜感激。

Answer 1

据我了解，您可以使用以下检查：

if (e.target !== this && $(e.target).is(':not(h1)')) return;

-DEMO-

Answer 2

我希望这是你想要的，因为描述含糊不清。

$(".accordion").on('click','h1,.accordion_header',function(e){
    if (e.target !== this)return;
    if (this.nodeName.toLowerCase() === 'h1'){
        $sub = $(this).parent().next('.accordion_content');
    }
    else{
        $sub = $(this).next('.accordion_content');
    }
    if ($sub.is(':visible')) {
        $sub.slideUp();
    } else {
        // slide up the opened accordion_content
        //$('.accordion_content:visible').slideUp(); 
        $sub.slideDown();
    }         
});

JSFiddle example

仅允许触发h1和父元素

2 个答案:

-DEMO-