javascript - 有关我的jQuery脚本的建议以及与iDevices的兼容性

我发布了一个关于脚本的问题，但是我还有另一个关于脚本的问题。

一开始我有两个蓝色按钮，它们在翻转时变成灰色。
当您单击两个按钮之一时，蓝色变成（并保持）灰色。
两个按钮都不能同时为蓝色。每个按钮一次调出一个表单（表单联系人和表单引用）。


我已经写了这个，我想知道是否可以简化它？
如何使“切换”功能与iDevices（iPad，iPhone ...）兼容？


先感谢您。

$(function() {
    $("#form-contact").hide();
    $("#form-devis").hide();

      $("#btn-contact").click(function(){
        $(this).toggleClass("btn-form-hover");
        $("#form-contact").fadeToggle(500, "linear");
        $("#form-devis").hide();
        $("#btn-devis").removeClass("btn-form-hover");
  });

    $("#btn-devis").click(function(){
        $(this).toggleClass("btn-form-hover");
        $("#form-devis").fadeToggle(500, "linear");
        $("#form-contact").hide();
        $("#btn-contact").removeClass("btn-form-hover");
  });

});

最佳答案

这看起来很简单，您只需强制一个按钮进入“已选择”状态即可。如果您需要对许多元素执行此操作，请参见下面的代码。

只要您包含的jQuery库支持，切换就可以在iDevices上运行。但是，由于没有鼠标，您不会在iDevices上获得悬停效果。

代码示例：

如果您打算经常使用按钮（翘板开关）来执行此操作，其中只有一个元素可以处于“已选择”状态，则可以执行以下功能：

代码笔：http://codepen.io/Skrypt/pen/dyCha

的HTML

<div class="rockerSwitch myRocker1">
  <button class="left">On</button><button class="right">Off</button>
</div>
<div class="rockerSwitch myRocker2">
  <button class="left">True</button><button class="right">False</button>
</div>
<div class="rockerSwitch myRocker3">
  <button class="left">Option 1</button><button class="right">Option 2</button>
</div>

的CSS

.rockerSwitch button {
  background-color: #dcffb2;
  border: 1px solid #87cf30;
  cursor: pointer;
  outline: 0;
}
.rockerSwitch button.left {
  margin-right: 0px;
  border-radius: 5px 0px 0px 5px;
}
.rockerSwitch button.right {
  margin-left: 0px;
  border-radius: 0px 5px 5px 0px;
}
.rockerSwitch button:hover {
  background-color: #fff;
}
.rockerSwitch button.selected {
  background-color: #87cf30;
}

JS / jQuery

$(function() {
  $('.myRocker1').rockerSwitch();
  $('.myRocker2').rockerSwitch();
  $('.myRocker3').rockerSwitch();
});

$.fn.rockerSwitch = function() {
  var left = $('.left', this);
  var right = $('.right', this);

  left.on('click', function() {
    left.addClass("selected");
    right.removeClass("selected");
  });
  right.on('click', function() {
    right.addClass("selected");
    left.removeClass("selected");
  });
}