jQuery变颜色以及下拉列表冲突问题
$(document).ready(function() {
// 当点击下拉列表选项时,改变背景颜色
$('.dropdown-menu li a').click(function() {
// 移除其他选项的选中样式
$('.dropdown-menu li a').removeClass('selected');
// 给当前点击的选项添加选中样式
$(this).addClass('selected');
// 获取选中的颜色值
var color = $(this).data('color');
// 改变背景颜色
$('.dropdown-menu').closest('.dropdown').find('.btn').css('background-color', color);
// 阻止链接默认行为
return false;
});
// 当点击下拉按钮时展开下拉列表
$('.dropdown-menu').closest('.dropdown').find('.btn').click(function() {
// 切换下拉列表的展开和收起状态
$(this).parent().find('.dropdown-menu').toggle();
});
// 当点击文档的其他部分时,收起下拉列表
$(document).click(function() {
// 隐藏下拉列表
$('.dropdown-menu').hide();
});
// 阻止点击下拉列表时隐藏下拉列表的事件冒泡
$('.dropdown-menu').click(function(event) {
event.stopPropagation();
});
});
这段代码修复了原始代码中的问题,并提供了一个更为清晰和有效的解决方案。它使用了更为合适的事件监听器和选择器,并且避免了潜在的样式冲突。此外,它使用了.data()
函数来获取颜色值,这样可以避免硬编码颜色值到选项中,使得代码更易于维护。
评论已关闭