jQueryクリックしたリンクに応じてコンテンツを切り替えたり変更したりします

Question

私はメニューを持っているウェブサイトで働いています。 メニューには2つまたは3つのリンクがあります。 リンクは、メニューの隣にあるスライドエフェクト付きのdivを開きます。 （メニューは右の列で、divは左に開きます）。

リンクをクリックします（A）。リンク（A）はテキストを含むdivを開きます。もう一度リンク（A）をクリックすると、divが消えます。 リンク（B）と同じロジックですが、代わりにギャラリーが表示されます。それは重要な部分ではありません。

div内の情報を切り替えることができます。 リンク（A）からの情報でdivがまだ開いているときにリンク（B）をクリックすると、divを閉じて再オープンしないようにするだけです。

基本的には、divを開いた同じリンクをクリックすると消えます。しかし、私が他のリンクをクリックすると、内容が変わるだけです。

提案がありますか？

<div class="col-md-2" id="openInfo"> 
    <div id="info"> <p>INFO</p></div> 

    <div id="images"> 
     <p>IMAGES</p> 
    </div> 

</div> 

リンク：：

<a href="#openInfo" id="treatInfo">TREATMENT INFO</a> 

    <a href="#openInfo" id="gallery" >GALLERY</a> 

スクリプト：ここ

はdivのだ

$("#gallery").click(function() { 
    $("#openInfo").toggleClass("open"); 
    $("#images").css("display", "block"); 
    $("#info").css("display", "none"); 
}); 


$("#treatInfo").click(function() { 
    $("#openInfo").toggleClass("open"); 
    $("#info").css("display", "block"); 
    $("#images").css("display", "none"); 
}); 

Answer 1

openクラスをトグルするときは、チェックを追加することができ、ときことを意味しますその条件が真でない場合、.openクラスはトグルされません。 ）である：

$("#gallery").click(function() { 
    if (!$("#openInfo").is(".open") || $("#images").is(":visible")) { 
     $("#openInfo").toggleClass("open"); 
    } 
    $("#images").css("display", "block"); 
    $("#info").css("display", "none"); 
}); 


$("#treatInfo").click(function() { 
    if (!$("#openInfo").is(".open") || $("#info").is(":visible")) { 
     $("#openInfo").toggleClass("open"); 
    } 
    $("#info").css("display", "block"); 
    $("#images").css("display", "none"); 
}); 

Answer 2

あなたがコンテンツや近くを交換する必要があるかどうかを知るためにあなたののdivで追加のプロパティを作成することができます。例えば、 "データ内容"

<div id="myDiv" data-content="images"> 
    <p>IMAGES</p> 
</div> 

あなたが使用してそのプロパティを取得することができますjQueryの使用：

$('#myDiv').attr('data-content'); 

また、あなたが使用して値を設定することができます

$('#myDiv').attr('data-content','images'); 
$('#myDiv').attr('data-content','info'); 

この方法で、あなたが知ることができますコンテンツを置き換えるかdivを閉じる必要がある場合：

$("#treatInfo").click(function() { 
    if($('#myDiv').attr('data-content') == 'info'){ 
     // close div 
    }else{ 
     $('#myDiv').attr('data-content','info'); 
     // load info content 
    } 
});