只允许h1和父元素触发

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();
    }         
});

从上面的参考中可以看到，仅当单击父（.accordion_header）时函数（slideDown，slideUp东西）才会触发，而不会在其子对象中（单击时）触发，但是，如何使它触发仅允许父级“ .accordion_header”及其子级h1使用的函数（.accordion_content的slidelide，slideDown东西）？

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

Answer 1

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

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

-演示-

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示例