Question

我有一个组合框，我构建了dinamically，在组合框内我有一些元素可以扩展并有更多元素显示（组合框将增长以显示子元素）：

<ul id="company-dropdown" class="dropdown-menu company-dropdown">
    <li data-id="65">
        <a>
            <div data-toggle="collapse" href="#childs65" class="filter-caret-container active">
                <i class="pull-left caret filter-caret"></i>
            </div>
            <input class="checkbox-filter" type="checkbox">
            Juan juan juan
        </a>
        <ul id="childs65" class="panel-collapse collapse">
            <li data-id="70">...</li>
        </ul>
    </li>
    <li data-id="89">
        ...
    </li>
</ul>

问题在于，当我点击插入符号以展开元素的子元素时，它还会检查元素本身。所以我尝试了e.stopPropagation以避免检查我，但这样我也无法扩展它。

$('.company-dropdown').off('click', 'li .filter-caret-container')
    .on('click', 'li .filter-caret-container', function(e) {
        e.stopPropagation();
    });

$('.company-dropdown').off('click', 'li .checkbox-filter')
    .on('click', 'li .checkbox-filter', function(e) {
        e.stopPropagation();
    });

//Check/uncheck the checkbox when click on any part of the element inside the dropdown
$('.company-dropdown').off('click', 'li a')
    .on('click', 'li a', function() {
        var dataId = $(this).closest('li').data('id'),
            $checkboxItem = $(' li[data-id="' + dataId + '"]>a>.checkbox-filter'),
            isChecked = $checkboxItem.prop('checked');

        $checkboxItem.prop('checked', !isChecked);
    });

如果我在点击插入符号时从stopPropagation中删除'event'，就会发生奇怪的事情：一切都按预期工作！为什么呢？

$('.company-dropdown').off('click', 'li .filter-caret-container')
    .on('click', 'li .filter-caret-container', function() {
        stopPropagation();
    });

Answer 1

首先我们停止传播，然后手动切换以扩展子元素列表：

$('.company-dropdown').off('click', 'li .filter-caret-container')
    .on('click', 'li .filter-caret-container', function(e) {
        e.stopPropagation();
        var childsToShow = $(this).attr('href');
        $(childsToShow + '.panel-collapse').toggle();
    });

复合框内的stopPropagation行为，在data-toggle =“collapse”中有一个可扩展元素

1 个答案: