滑动关闭Overlay外部面板后按钮仍高亮，该如何修复？

这个问题我之前也碰到过！本质是jQuery Mobile在处理手势滑动关闭面板时，没有自动重置触发按钮的激活状态——按钮还保留着ui-btn-active这个高亮类，所以看起来一直是按下的样子。

解决思路很简单：监听面板的panelclose事件，在面板完全关闭后，手动移除触发按钮的高亮类就行。

具体步骤： #

1. 给触发按钮加个专属类（方便精准定位，避免影响其他按钮），比如给按钮加panel-trigger类：

<a href="#panel" data-rel="panel" class="panel-trigger ui-btn ui-corner-all ui-shadow">打开面板</a>

2. 绑定面板关闭事件，在事件回调里移除按钮的高亮类：

// 用jQuery Mobile的pagecreate事件确保DOM初始化完成
$(document).on("pagecreate", function() {
  // 监听id为panel的面板关闭事件
  $(document).on("panelclose", "#panel", function() {
    // 找到触发按钮，移除ui-btn-active类
    $(".panel-trigger").removeClass("ui-btn-active");
  });
});

如果你不想加专属类，也可以用属性选择器定位按钮： #

如果你的触发按钮是用data-rel="panel"绑定的，直接用这个属性来选：

$(document).on("panelclose", "#panel", function() {
  $("[data-rel='panel']").removeClass("ui-btn-active");
});

为什么这个方法有效？ #

点击按钮打开面板时，jQuery Mobile会自动给按钮添加ui-btn-active类来标记激活状态，但滑动关闭是手势操作，框架默认没有处理这个状态的重置，所以我们手动在面板关闭后清除这个类，就能让按钮恢复正常样式了。

把上面的代码加到你的页面里，滑动关闭面板后，按钮的高亮状态就会自动消失啦！

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