无法从 jQuery mobile 可折叠设备中移除蓝色光晕
Posted
技术标签:
【中文标题】无法从 jQuery mobile 可折叠设备中移除蓝色光晕【英文标题】：Can't remove blue glow from jQuery mobile collapsible 【发布时间】：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 【参考方案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”和它工作（再次）以上是关于无法从 jQuery mobile 可折叠设备中移除蓝色光晕的主要内容，如果未能解决你的问题，请参考以下文章