Facebook如何切換其通知中心圖標以單擊時顯示帶有通知的各個DIV？

Question

Facebook如何切換其通知中心圖標以單擊時顯示帶有通知的各個DIV？

你們所有人都至少與臉書網站上徽標附近左上角的Facebook通知中心互動。他們如何鍛鍊？

這是下面的圖片可以說明Facebook的通知中心我談論

這是我使用到的鍛鍊，我的樣本代碼..

<style> 
     div, a { 
      display: block; 
     } 

     body { 
      width: 500px; 
      margin: 100px auto; 
     } 

     a { 
      border: 1px solid #ccc; 
      background: #ececec; 
      -webkit-border-radius: 3px; 
      padding: 5px 20px; 
      text-align: center; 
      color: red; 
      text-decoration: none; 
     } 

     #one { 
      margin-bottom: 30px; 
     } 

     .dn_js { 
      display: none; 
     } 

     .db_js { 
      display: block; 
     } 

    </style> 

    <div class="wrap"> 
     <div id="one"> 
      <a href="#" data-open="frdz" class="aTggl active">Friends</a> 
      <div id="frdz" class="innerWrap dn_js">Mike</div> 
     </div> 
     <div id="two"> 
      <a href="#" data-open="Ntfn" class="aTggl">Noticiations</a> 
      <div id="Ntfn" class="innerWrap dn_js">Peter</div> 
     </div> 
    </div> 

這裏是JS

<script type="text/javascript"> 
     $(document).ready(function (e) { 
      $(".aTggl").on("click", function(e) { 
       e.preventDefault(); 
       var $this = $(this); 

       $(".active").removeClass("active"); 

       $this.addClass("active").parent().siblings().children(".innerWrap").addClass("dn_js"); 

       var content_show = $(this).data("open"); 
       $("#"+content_show).addClass("db_js"); 
      }); 
     }); 
    </script> 

Answer 1

在做了一些小的閱讀閱讀之後，我嘗試了寫一些代碼，它確實有效並且滿意我的問題是什麼。如果你們不介意，你可以查看我的代碼並告訴我要改進，添加或刪除什麼。

這是jsFiddle Demo。謝謝。

這裏也是上述演示代碼。

<div id="nc_wrap"> 
    <div class="one nc_node"> 
     <a class="node_link" data-nc="frd_rqst">Friend Requests</a> 
     <div id="frd_rqst" class="ncInnerWrap dn_js">F_R Notfz</div> 
    </div> 

    <div class="two nc_node"> 
     <a class="node_link" data-nc="msg_nc">Messages</a> 
     <div id="msg_nc" class="ncInnerWrap dn_js">Msg Notfz</div> 
    </div> 
</div> 



    #nc_wrap { 
    display:block; 
    width:100%; 
    height:40px 
} 
     .one, .two { 
    display:inline-block; 
    width:40%; 
    height:100%; 
    float:left; 
    background-color:#ddd 
} 
.one a, .two a { 
    display:block; 
    text-align:center; 
    line-height:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
    cursor:pointer; 
} 
.one { 
    margin-right: 5%; 
} 
.activeNC { 
    background-color: red; 
} 
.dn_js { 
    display:none; 
} 
.db_js { 
    display:block; 
} 

     $(document).ready(function() { 
    $(".nc_node").on("click", ".node_link", function (event) { 
     event.preventDefault(); 
     var $this = $(this); 
     var nc_panel = $("#" + $this.data("nc")); 

     $('.nc_node a').not($this).removeClass('activeNC').next(".ncInnerWrap").removeClass("db_js").addClass("dn_js"); 
     //$($this).stop(true, true).toggleClass("activeNC"); 
     $this.toggleClass("activeNC").next(".ncInnerWrap").toggleClass("db_js dn_js"); 
    }); 

    /*$(this).on("click", function(){ 
     $(".node_link").removeClass("activeNC"); 

     return false; 
    }); 
    */ 
});