關於我的jQuery腳本的建議+與iDevices的兼容性

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庫支持，切換應該可以在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"); 
    }); 
}