解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
更新時(shí)間：2017年06月13日 09:39:15 作者：多小啦
本篇文章主要介紹了解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法，具有一定的參考價(jià)值，有興趣的可以了解一下
昨天用jQuery和bootstrap實(shí)現(xiàn)下拉菜單復(fù)選框，今天把做好的demo組合進(jìn)項(xiàng)目里，發(fā)現(xiàn)有點(diǎn)bug，就是點(diǎn)擊銀行復(fù)選框的時(shí)候，每點(diǎn)一次dropdown-menu這個(gè)div會(huì)立即隱藏，這就導(dǎo)致每次只能選一個(gè)。
這應(yīng)該是事件傳播的原因，代碼修改如下：
var banks = $('.all').siblings().children();
$('.all>input').click(function() {
var flag = $(this).prop('checked');
banks.prop('checked', flag);
})
// 阻止事件傳播, 否則在點(diǎn)擊復(fù)選框的時(shí)候，dropdown-menu這個(gè)div會(huì)立即隱藏
$('.dropdown-menu label').click(function(e) {
e.stopPropagation();
});
banks.click(function() {
// 如果有一個(gè)沒(méi)選中，全選按鈕不選中
// 如果全部選中，全選按鈕被選中
var num = 0;
banks.each(function() {
if ($(this).prop("checked")) {
num++;
}
})
if (num == banks.length) {
$('.all>input').prop('checked', true);
} else {
$('.all>input').prop('checked', false);
}
})
另外，需要新增加的功能是，點(diǎn)擊“保存”按鈕的時(shí)候，需要把選中的銀行名稱以逗號(hào)拼接成字符串傳遞給后臺(tái)。這部分比較簡(jiǎn)單，代碼如下：
// 在提交時(shí)，獲取選中的所有值，并把這些值拼接成字符串
$('.submit').click(function() {
var bankArr = [];
banks.each(function() {
if ($(this).prop("checked")) {
bankArr.push($(this).val());
}
});
var bankStr = bankArr.join(',');
console.log(bankStr);
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談webpack對(duì)樣式的處理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JavaScript cookie的設(shè)置獲取刪除詳解
這篇文章主要介紹了JavaScript cookie的設(shè)置獲取刪除等等，,需要的朋友可以參考下2014-02-02
JS Object構(gòu)造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構(gòu)造函數(shù)之Object.freeze，對(duì)JS感興趣的同學(xué)，可以深入了解下2021-04-04
在視頻前插入廣告...2006-11-11
JavaScript循環(huán)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript循環(huán)的相關(guān)資料，JavaScript的兩種循環(huán)方式，一種是for循環(huán)，另while一種是循環(huán)具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
從無(wú)憂轉(zhuǎn)過(guò)來(lái)的數(shù)組的擴(kuò)展 ，非常不錯(cuò)的把javascript數(shù)組的擴(kuò)展2008-07-07
這篇文章主要介紹了js實(shí)現(xiàn)進(jìn)度條的方法,實(shí)例分析了兩種不同的實(shí)現(xiàn)方法,并說(shuō)明了setTimeout和setInterval的使用區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript 總結(jié)幾個(gè)提高性能知識(shí)點(diǎn)(推薦)
下面小編就為大家?guī)?lái)一篇JavaScript 總結(jié)幾個(gè)提高性能知識(shí)點(diǎn)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
本篇文章主要介紹了javascript的知識(shí)點(diǎn)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01