Question

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

我在开头有两个蓝色按钮，在翻转时变为灰色。单击两个按钮之一时，蓝色变为（并保持）灰色。两个按钮都不能是蓝色。每个按钮一次显示一个表单（表单联系和表单引用）。

我写过这篇文章，我想知道我是否可以简化它？
如何使“切换”功能与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");
  });

});

Answer 1

这看起来很简单，只能强制一个按钮具有“选定”状态。如果您需要为许多元素执行此操作，请参阅下面的代码。

只要你包含的jQuery库支持它，

Toggle就可以在iDevices上运行。但是，由于没有鼠标，因此您不会在iDevices上获得悬停效果。

代码示例：

如果您打算经常使用按钮（摇臂开关）来执行此操作，其中只有一个元素可以具有“已选择”状态，您可以创建如下函数：

CodePen ：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");
  });
}

关于我的jQuery脚本+与iDevices的兼容性的建议

1 个答案: