如何使用按鈕切換窗口並使用點擊消除

Question

我有兩個或多個顯示某些內容的按鈕。這個想法是當我點擊按鈕.BB11時顯示#Cont11並隱藏#Cont11當我點擊或當我點擊其他兩個按鈕時。其餘部分也是如此。我設法實現顯示/隱藏，當我點擊某個按鈕並單擊時，但窗口不隱藏，當我點擊另一個按鈕時，內容顯示。它需要在手機上工作。

<div id="footer-menu"> 
    <a class="BB11 BottomButton">Button1</a> 
    <a class="BB12 BottomButton">Button2</a> 
    <a class="BB13 BottomButton">Button3</a> 
</div> 
<div id="Content"> 
    <div id="Cont11" class="ContIn">Some content</div> 
    <div id="Cont12" class="ContIn">Some content</div> 
    <div id="Cont13" class="ContIn">Some content</div> 
</div> 

的CSS：

.ContIn{display: none;} 

JS：

$(".BB11").click(function(e){ 
    $(".showing").fadeOut(300); 
    $("#Cont11").fadeIn(300);   //toggle the window 
    $("#Cont11").toggleClass("showing"); 
    $(this).toggleClass("highlighted"); 
    e.stopPropagation();     //prevent event propagation 
}); 
$(document).click(function(){ 
    $("#Cont11").fadeOut(300);   //hide the window 
    $("#Cont11").toggleClass("showing"); 
    $(".BB11").removeClass("highlighted"); 
}); 
$("#Cont11").click(function(e){ 
    e.stopPropagation();     
}); 
/*------------------------------------*/ 
$(".BB12").click(function(e){ 
    $(".showing").fadeOut(300); 
    $("#Cont12").fadeIn(300); 
    $("#Cont12").toggleClass("showing"); 
    $(this).toggleClass("highlighted"); 
    e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $("#Cont12").fadeOut(300); 
    $("#Cont12").toggleClass("showing"); 
    $(".BB12").removeClass("highlighted"); 
}); 
$("#Cont12").click(function(e){ 
    e.stopPropagation();     
}); 
/*------------------------------------*/ 
$(".BB13").click(function(e){ 
    $(".showing").fadeOut(300); 
    $("#Cont13").fadeIn(300); 
    $("#Cont13").toggleClass("showing"); 
    $(this).toggleClass("highlighted"); 
    e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $("#Cont13").fadeOut(300); 
    $("#Cont13").toggleClass("showing"); 
    $(".BB13").removeClass("highlighted"); 
}); 
$("#Cont13").click(function(e){ 
    e.stopPropagation();     
}); 

Answer 1

使用 「數據 - 」 屬性和只有少數幾類爲每個按鈕，這將有助於你減少所有的腳本行你寫的。這是你的小提琴。這將簡化一切，只是一種適用於所有按鈕的方法。如果您希望點擊時內容消失，我假設您正在嘗試創建模式。因爲如果您檢查「文檔」中的點擊，它將禁用所有其他可點擊元素。因此，在文檔上方放置疊加層，並在內容後面檢查點擊。

https://jsfiddle.net/tbd5e8cf/1/

$(function(){ 
    $(".BottomButton").on("click", function(e){ 
    e.stopPropagation(); 

    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut(); // IF YOU LIKE USE removeClass(); INSTEAD hide(); FOR YOUR CUSTOM CSS. 

    // SHOW THE RELATED CONTENT TO THIS BUTTON 
    var cont = $(this).attr("data-toOpen"); 
    console.log(cont); 
    $("#"+cont).fadeIn(); // IF YOU LIKE USE show(); INSTEAD fadeIn(); FOR YOUR CUSTOM CSS. 

    }) 

    $("#Content").on("click", function(e){//CHECK FOR CLICK 
    e.stopPropagation(); 
    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut(); 
    }) 
})