在不同地點

Question

2個格Jquery的切換系統，我想這樣做系統：JSFiddle

$(".more").click(function(e) { 

    if($(this).hasClass("open")) { 
     $(this).removeClass("open").addClass("closed"); 
    } else { 
     // if other menus are open remove open class and add closed 
     $(this).siblings().removeClass("open").addClass("closed"); 
     $(this).removeClass("closed").addClass("open"); 
    } 

}); 

但是有兩個DIV不在一個接一個。我應該怎麼改變，在此代碼，使其工作時兩個元素放置在兩個不同的位置？

在這種情況下，例如：

<div class="column w50percent"> 
    <button class="more closed">Demande de devis</button> 
</div> 
<div class="column w50percent"> 
    <button class="more closed">Prise de contact</button> 
</div> 

預先感謝您

Answer 1

而不是依賴於當前元素，其餘相關部件之間的位置關係（在這種情況下，兄弟姐妹）中有使用外部參考（越類）

var $els = $(".more").click(function (e) { 
    if (!$(this).hasClass("open")) { 
     // if other menus are open remove open class and add closed 
     $els.not(this).filter('.open').removeClass("open").addClass("closed"); 
    } 
    $(this).toggleClass("closed open"); 
}); 

演示：Fiddle

還可以使用toggleClass()而不是使用添加&刪除類兩次

更新：

var $els = $(".more"); 

if (Modernizr.touch) { 
    $els.hammer(); 
} 
var $els = $(".more").on(Modernizr.touch ? 'tap' : 'click', function() { 
    if (!$(this).hasClass("open")) { 
     $els.not(this).filter('.open').removeClass("open").addClass("closed"); 
    } 
    $(this).toggleClass("closed open"); 
}); 

Answer 2

除非我誤讀了這一點，每一個你希望的項目影響有類「更多」。在這種情況下，你可以簡單地在大多數情況下與類名稱替換$（本）。所以，你的代碼會...

$(".more").click(function(e) { 
    $('.more').removeClass("open").addClass("closed"); 
    $(this).addClass('open'); 
    } 
}); 

這僅僅去除類「更多」的所有項目是「開放」類，然後單擊的項目上應用的「開放」類。

Answer 3

再次感謝你，阿倫P約翰尼拉的代碼現在運行非常好。爲了使其與觸摸設備兼容，我使用了帶有錘子的Modernizr。但是如何減少我的代碼中的重複？

if(Modernizr.touch){ 
var $els = $(".more").hammer().on("tap", function() { 
    if (!$(this).hasClass("open")) { 
     $els.not(this).filter('.open').removeClass("open").addClass("closed"); 
    } 
    $(this).toggleClass("closed open"); 
}); 
} else { 
var $els = $(".more").click(function() { 
    if (!$(this).hasClass("open")) { 
     $els.not(this).filter('.open').removeClass("open").addClass("closed"); 
    } 
    $(this).toggleClass("closed open"); 
}); 
}