javascript - Bootstrap 工具提示禁用了我的 javascript 的部分内容

Question

所以这是我遇到的一个让我抓狂的问题。一旦我在标签上启用 Bootstrap 工具提示，我的自定义 JavaScript 将不会触发。如果我从标签中删除触发工具提示的 Bootstrap 代码，一切都会正常。 JSFiddle Example

工作示例(删除:data-toggle="tooltip"data-placement="left"title="Parent Title Text."，它将起作用):

<li>
    <a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
        <span class="glyphicon glyphicon-chevron-down" style="display:none;"></span>
    </a>    
        <div class="data-options" style="display: none">
            <a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 1 Text">Child Item 1</a>    
            <a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 2 Text">Child Item 2</a>
            <a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 3 Text">Child Item 3</a>    
        </div>
</li>

Answer 1

当您启用 Bootstrap 工具提示时，它会插入工具提示 <div>紧接着 .toggle-data-options .

.data-options不再是.next()元素，所以没有匹配。使用.nextAll()相反:

$(document).ready(function () {
    $('.toggle-data-options').on('click', function () {
        $(this).nextAll('.data-options').toggle('fast');
        $(this).toggleClass("active");
        $(this).find('span').slideToggle(0);
    });
});

JSFiddle