仅单击 header 而不是其指定的 children

Question

我有这个html

<div class="accordion_wrapper">
    <div class="accordion_header">
        <h1>Accordion Test</h1>
        <select>
            <option value="" selected disabled>Options</select>
            <option value="option 1">Option 1</option>
            <option value="option 2">Option 2</option>
            <option value="option 3">Option 3</option>
        </select>
    </div> <!-- end of accordion header -->
    <div class="accordion_content">
        <p>this is the accordion content</p>
    </div>
</div> <!-- end of accordion wrapper -->

和这个脚本

//already integrated the required jquery
//already on document ready
$('.accordion_header').bind({
    click: function () {
        var $sub = $(this).next('.accordion_content').stop(true, true);
        if ($sub.is(':visible')) {
            $sub.slideUp();
        } else {
            $sub.slideDown();
        }
    }
});

一切正常，但是如果我单击 select 框（下拉内容），也会触发 .accordion_header 的单击功能，我不希望它在单击 [= 时触发34=] 框。任何线索、想法、建议、建议，有助于 stop/prevent 单击 select 框时触发 .accordion_header？

下面是我的片段

    //already integrated the required jquery
    //already on document ready
    $('.accordion_content').hide();
    $('.accordion_header').bind({
        click: function () {
            var $sub = $(this).next('.accordion_content').stop(true, true);
            if ($sub.is(':visible')) {
                $sub.slideUp();
            } else {
                $sub.slideDown();
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="accordion_wrapper">
        <div class="accordion_header">
            <h1>Accordion Test</h1>
            <select>
                <option value="" selected disabled>Options</option>
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
        </div> <!-- end of accordion header -->
        <div class="accordion_content">
            <p>this is the accordion content</p>
        </div>
    </div> <!-- end of accordion wrapper -->

Answer 1

您需要停止向子元素传播事件。

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('select').click(function(e){
    e.stopPropagation();
});

仅单击 header 而不是其指定的 children

click only the header not its specified children

javascript

jquery

accordion

jquery-ui-accordion