Показать один div скрыть другие с помощью jquery

Question

Я загрузил некоторый скрипт для меню уведомлений Facebook notification menu, и он отлично работает, но я хотел бы создать другую ссылку, поэтому, когда вы нажмете на ссылку, это текущее уведомление закроется, а другое один будет открыт. И когда вы нажимаете на документ, уведомление также будет закрыто (PS, это работает сегодня в существующем коде)

Он должен работать как меню facebook, когда вы нажимаете на friendrequest, сообщения или ваш профиль.

<span class="menuoptions active"> 
    <div style="position: relative;"> 

     <div id="notification_li"></div> 
     <a href="#" id="notificationLink"> 
      <div class="counter">22</div> 
       Click here to show options 
     </a> 
     <div id="notificationContainer"> 
     <div id="notificationTitle">Messages</div> 
     <div id="notificationsBody" class="notifications"> 
      Notification goes here 
     </div> 
     <div id="notificationFooter"><a href="#">See All</a></div> 
     </div> 


    </div> 
</div> 

код JQuery, который используется в настоящее время является:

$(document).ready(function() 
{ 
    $("#notificationLink").click(function() 
{ 
    $("#notificationContainer").fadeToggle(300); 
    return false; 
}); 

//Document Click 
$(document).click(function() 
{ 
    $("#notificationContainer").hide(); 
}); 

//Popup Click 
$("#notificationContainer").click(function() 
{ 
    return false 
}); 

}); 

Как должен выглядеть JQuery бы сделать эту работу?

Answer 1

Смотрите эту обновленную скрипку вашей версии: http://jsfiddle.net/3ho7ommm/4/

выше делает следующее:

• Показывает #notificationContainer и скрывает # notificationContainer2, если он открыт при нажатии ссылки 1
• Показывает # notificationContainer2 и скрывает #notificationContainer, если он открыт, когда вы нажимаете ссылку 2
• Скрывает #notificationContainer и # уведомлениеContainer2, когда вы нажимаете в любом месте документа (например, yo u уже сделали)

Несколько проблем, хотя. У вас слишком много идентификаторов - вы должны использовать классы для всего, что появляется на странице более одного раза (#notificationTitle, #notificationBody, #notificationFooter), и есть несколько более простых и чистых способов написания JS. Вот как бы я это сделать:

HTML:

<div class="menu"> 
    <div class="link"> 
     <a href="#">Link 1</a> 
     <div class="dropdown"> 
      Content for dropdown 1 
     </div> 
    </div> 
    <div class="link"> 
     <a href="#">Link 2</a> 
     <div class="dropdown"> 
      Content for dropdown 2 
     </div> 
    </div> 
</div> 

CSS:

.link { 
    display: inline-block; 
    position: relative; 
    float: right; 
} 

.link a { 
    padding: 10px; 
} 

.link .dropdown { 
    display: none; 
    position: absolute; 
    top: 20px; 
    right: 0px; 
    color: white; 
    background: #999; 
    height: 200px; 
    width: 200px; 
    padding: 20px; 
    border: 1px solid red; 
} 

JQuery:

// When .link a is clicked. You used .click(), I used .on("click") 
$('.link a').on("click", function(e){ 
    // Prevent link being followed (you can use return false instead) 
    e.preventDefault(); 
    // Hide all other .dropdown divs 
    $(this).parent('.link').siblings().children('.dropdown').fadeOut(); 
    // Toggle current .dropdown 
    $(this).siblings('.dropdown').fadeToggle(); 
}); 

Вот рабочий jsfiddle моей версии: http://jsfiddle.net/abLku7e1/

Надеюсь, что поможет :)