ボタンでウィンドウを切り替える方法をクリックしてください。

Question

いくつかのコンテンツを表示するボタンが2つ以上あります。考え方は、ボタン.BB11をクリックすると#Cont11を表示し、クリックしたとき、または他の2つのボタンをクリックしたときに#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

使用 "DATA-" 属性や各ボタンのための唯一のいくつかのクラス、あなたが書いたここにあなたのためのフィドルがあります。これはすべてを簡素化します。すべてのボタンで機能する方法は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(); 
    }) 
})