最近小颖接了个私活，客户要求用jquery和bootstrap来实现业务需求，小颖总结了下在写的过程中的一下坑，来记录一下

1.动态加载html文件

    switch (\_domName) {  
        case 'firstMenu':  
            // 首页  
            $("main").load('home.html');  
            break  
        case 'secondMenu':  
            // 下拉菜单  
            $("main").load("dropdown.html");  
            break  
        case 'thirdMenu':  
            // 工具提示框  
            $("main").load("tooltips.html");  
            break  
    }

2.语音播报文字、暂停播报

function soundSpeak(text) {
const msg = new SpeechSynthesisUtterance();
msg.text = text; //播放文案
msg.volume = '1'; // 声音的音量，区间范围是0到1，默认是1。
msg.rate = '1'; // 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
msg.pitch = '0'; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
msg.lang = 'zh-cn'; // 使用的语言，字符串， 例如："zh-cn"
return msg;
}
var sound = window.speechSynthesis; // 定义局部变量
//播放
function playText(text) {
sound.speak(soundSpeak(text));
}

//停止
function stopSpeak() {
$('.open_voice').removeClass('active');
$('.open_voice').attr("src", 'img/horn.png');
sound.cancel();
}

    if (sound.speaking) {  
        stopSpeak();  
    }

// 语音播放文字  
$("main").delegate("img.open\_voice", "click", function () {     //delegate给后加的节点绑定事件  
    if ($(this).hasClass('active')) {  
        stopSpeak();  
    } else {  
        $(this).addClass('active');  
        $(this).attr("src", 'img/horn\_close.png');  
        playText($('.txt-box').text());  
    }  
});

再次点击后图标变成默认状态

3.使用 $(document).load("dropdown.html"); 动态加载的元素，要给其子元素添加点击事件时使用以下方法是不可行的：

$('img.open\_voice').click(function(){

})

需使用以下放发才能绑定其点击事件：

$("main").delegate("img.open\_voice", "click", function () {     //delegate给后加的节点绑定事件

});

$(document).on("click", "img.open\_voice", function () {     //给后加的节点绑定事件  
    alert(111111)  
});

4.bootstrap 导航切换标记当前菜单

// 切换一级菜单  
$('p.nav-link').click(function () {  
    var \_childMenu = $('.dropdown-item.menu-child.active').attr('name');  
    var \_domName = $(this).attr('name');  
    // 切换菜单时移除上一个菜单的子菜单选中类名  
    if (\_childMenu && \_domName && \_childMenu != \_domName) {  
        $('.dropdown-item.menu-child').removeClass('active');  
    }  
    $('p.nav-link.active').removeClass('active');  
    $(this).addClass('active');  
    if (sound.speaking) {  
        stopSpeak();  
    }  
    switch (\_domName) {  
        case 'firstMenu':  
            // 首页  
            $("main").load('home.html');  
            break  
        case 'secondMenu':  
            // 下拉菜单  
            $("main").load("dropdown.html");  
            break  
        case 'thirdMenu':  
            // 工具提示框  
            $("main").load("tooltips.html");  
            break  
    }  
});

5.bootstrap工具提示框显、隐

点自己显示，点其他地方隐藏

$('body').click(function () {  
    $("\[data-toggle='popover'\]").popover('hide');  
})

// 提示框点击事件  
$("main").delegate(".tooltips-box span", "click", function (e) {  
    e.stopPropagation();  
    $('.tooltips-box span').removeClass('active\_toggle');  
    $(this).addClass('active\_toggle');  
    $("\[data-toggle='popover'\]").popover('hide');  
    $(this).popover('show');  
})