如何合并两段jQuery脚本实现Bootstrap菜单的点击切换类与外部点击隐藏并切换类功能？

完全没问题，你既可以把两段脚本合并到一个事件处理函数里，也可以通过封装函数的方式在条件判断后触发多个操作，甚至还能优化逻辑让菜单和按钮状态更同步。我给你几个实用的方案：

方案一：直接在现有document点击事件中添加操作 #

最简单的方式就是把toggleClass的逻辑直接放到菜单外点击的判断块里，同时保留原有的.test点击事件：

// 合并后的代码
$(document).click(function (event) {
  // 点击区域不在Bootstrap菜单内时
  if (!$(event.target).is('.navbar-collapse *')) {
    // 隐藏菜单
    $('.navbar-collapse').collapse('hide');
    // 给.test元素执行toggleClass操作
    $(".test").toggleClass('active');
  }
});

// 保留原有的.test点击切换逻辑
$(".test").click(function () {
  $(this).toggleClass('active');
});

方案二：封装函数，提高代码可维护性 #

如果之后还需要修改这两个操作，把它们封装成独立函数会更方便，避免重复代码：

// 封装菜单外点击需要执行的所有操作
function handleMenuClose() {
  $('.navbar-collapse').collapse('hide');
  $(".test").toggleClass('active');
}

// 绑定document点击事件
$(document).click(function (event) {
  if (!$(event.target).is('.navbar-collapse *')) {
    handleMenuClose();
  }
});

// 保留.test的点击切换
$(".test").click(function () {
  $(this).toggleClass('active');
});

方案三：优化逻辑，让按钮与菜单状态同步（更推荐） #

猜你可能用.test作为Bootstrap菜单的触发按钮（比如汉堡图标），这种情况下最好让按钮的active状态和菜单的显示/隐藏完全同步，避免状态不一致：

// 点击.test按钮时，同时切换按钮状态和菜单显示
$(".test").click(function () {
  $(this).toggleClass('active');
  $('.navbar-collapse').collapse('toggle');
});

// 点击菜单外区域时，隐藏菜单并移除按钮的active类（这里用removeClass比toggle更合理，因为菜单隐藏后按钮应该恢复初始状态）
$(document).click(function (event) {
  const isMenuOrButton = $(event.target).is('.navbar-collapse *') || $(event.target).is('.test');
  if (!isMenuOrButton) {
    $('.navbar-collapse').collapse('hide');
    $(".test").removeClass('active');
  }
});

这样一来，菜单的显示/隐藏和按钮的active状态就完全绑定了，不会出现菜单已经隐藏但按钮还处于active状态的情况～

内容的提问来源于stack exchange，提问作者yuki