无法从 jQuery mobile 可折叠设备中移除蓝色光晕答案

【问题标题】：Can't remove blue glow from jQuery mobile collapsible无法从 jQuery mobile 可折叠设备中移除蓝色光晕
【发布时间】：2018-07-28 17:58:49
【问题描述】：

制作它时遇到了很多麻烦，以便 jQuery 移动可折叠在单击时不显示蓝色发光框阴影。给定一些 HTML，例如：

<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>

...我发现的其他一些答案似乎表明以下 CSS 会有所帮助，但没有骰子：

.collapsibles {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

还尝试将这个 CSS 应用到 h1s、内联应用和其他一些东西 - 到目前为止没有成功。

JSFiddle 演示问题：https://jsfiddle.net/pseudobison/xd6oejzz/2/

【问题讨论】：

提供一个工作示例。这些 sn-p 都没有向我们展示您的问题。
谢谢@Pedram，我刚刚在这里添加了一个工作示例：jsfiddle.net/pseudobison/xd6oejzz/2

标签： jquery css jquery-mobile jquery-mobile-collapsible

【解决方案1】：

要覆盖的 JQM 类是 .ui-btn:focus。

如果您想避免仅用于可折叠标题按钮的蓝色光环，请使用：

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

您还可以通过覆盖

从可折叠部件内的所有可点击小部件中移除蓝色光环

.ui-collapsible .ui-btn:focus

演示：

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.ui-collapsible .ui-btn:focus {
  /*
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  */
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div role="main" class="ui-content">
        <div class="row collapsibles" data-role="collapsible">
          <h1>Supercategory A</h1>
          <div class="col-xs-7 txt">A1</div>
          <div class="col-xs-5"><button id="a1">Go</button></div><br><br>
          <div class="col-xs-7 txt">A2</div>
          <div class="col-xs-5"><button id="a2">Go</button></div><br><br>
          <br>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

请更改将应用这些更改的DOM selector：

/* This will removed the blue outline once expanded */
.collapsibles h1 a.ui-collapsible-heading-toggle {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

这是一个示例 JS Fiddle： https://jsfiddle.net/wvta0ezL/4/

希望这对您的情况有所帮助。

【讨论】：

太棒了，做到了。谢谢！
在 JQuery Mobile 1.45 中不起作用...我使用了“.ui-collapsible-heading-toggle”而不是“.collapsibles h1 a.ui-collapsible-heading-toggle”和它工作（再次）