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

一切正常，但是如果我点击选择框（下拉列表），也会触发.accordion_header的点击功能，如果单击选择框，我不希望它触发。任何线索，想法，建议，建议，有助于阻止/阻止单击选择框时触发.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

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

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

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

单击标题而不是其指定的子标题

1 个答案: