如何实现点击标题及Header Div区域均可触发折叠功能

嘿，这个需求很好实现，咱们可以复用现有按钮的折叠逻辑，或者直接调用AdminLTE的内置方法，下面给你两种靠谱的方案：

方案1：触发原有折叠按钮的点击事件 #

这是最省心的方式，直接让Header区域和标题的点击事件“转发”给内部的折叠按钮，完全复用已有的逻辑：

// 给box-header容器和标题绑定点击事件
$('.box-header, .box-header .box-title').on('click', function(e) {
  // 避免点击按钮本身时重复触发（毕竟按钮在header里）
  if (!$(e.target).closest('.btn-box-tool').length) {
    // 找到当前header里的折叠按钮，触发它的点击
    $(this).closest('.box-header').find('.btn-box-tool[data-widget="collapse"]').click();
  }
});

方案2：直接调用AdminLTE的Box折叠方法 #

如果你的项目用的是AdminLTE框架，它的Box组件自带了toggle方法，直接调用会更高效：

$('.box-header, .box-header .box-title').on('click', function(e) {
  // 排除按钮区域，防止重复执行折叠动作
  if (!$(e.target).closest('.btn-box-tool').length) {
    // 获取当前对应的整个box容器
    const $targetBox = $(this).closest('.box');
    // 调用AdminLTE的内置切换方法
    $targetBox.boxWidget('toggle');
  }
});

小细节优化 #

为了让用户一眼就知道这个区域可点击，建议加个CSS样式，把鼠标指针改成手型：

.box-header, .box-header .box-title {
  cursor: pointer;
}

这样鼠标移上去的时候，用户就明白这里是可以点击交互的啦～

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