我正在使用 Bootstrap 构建 HTML5 应用程序。我有一些自定义标记,以便为一些单选按钮添加皮肤,还有一些 JQuery 来驱动它:
<div role="group" class="btn-group btn-group-justified">
<label for="radioOption1" class="btn btn-primary">
<input type="radio" id="radioOption1" name="Options" />
<span>ABC</span>
</label>
<label for="radioOption2" class="btn btn-default">
<input type="radio" id="radioOption2" name="Options" />
<span>XYZ</span>
</label>
</div>
<script type="text/javascript">
$(document).ready(function () {
var radios = $("input[name=\"Options\"");
radios.click(function () {
radios.each(function () {
$("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-primary", $(this).is(":checked"));
$("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-default", !$(this).is(":checked"));
});
});
});
</script>
它适用于桌面,但在我的 iPhone 上,每当我点击其中一个标签时,它就会更改为显示桌面的悬停样式,而不是点击样式。
因此,在这个特定实例中,“触摸”似乎等同于“悬停”。
有没有人有这方面的经验或知道如何解决?
最佳答案
应该是这样的:
$(document).ready(function () {
var radios = $('input[name="Options"]');
radios.change(function () {
$('label[for="' + this.id + '"]').toggleClass("btn-primary", $(this).is(":checked"))
.siblings('label').toggleClass("btn-primary btn-default");
});
});
});
关于jquery - iPhone touch 在 HTML5 应用程序中表现得像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32434437/