Я не уверен, почему мой простой код javascript не работает. Также не возникает ошибок в консоли. Любая помощь приветствуется.Код недействительный
, когда я нажимаю на ид #notificationLink
идентификатор #notificationContainer
не появляется (я изначально иметь его в моем CSS, как display:none
под #notificationContainer
)
application.html.erb
<ul class="nav_content">
<li class="notification_li">
<span id="notification_count">1</span>
<%= link_to '', '#', id: "notificationLink", class: "fa fa-bell" %>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">I am the general notification</div>
<div id="notificationFooter"><a href="#">See All</a></div>
</div>
</li>
</ul>
application.js
$(document).ready(function() {
$("#notificationLink").click(function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});
//Document Click hiding the popup
$(document).click(function() {
$("#notificationContainer").hide();
});
//Popup on click
$("#notificationContainer").click(function() {
return false;
});
});
navigatin.css.scss
/*----- notification: general_notification -----*/
#notification_count {
font-family: 'Lato', sans-serif;
padding: 0px 5px 0px 4px;
background: #b14525;
color: #ffffff;
font-weight: 500;
border-radius: 4px;
position: absolute;
margin-top: 6px;
margin-left: 9px;
font-size: 11px;
}
#notificationLink:hover {
background-color: transparent;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 50px;
margin-left: -190px;
width: 400px;
z-index: 1;
display: none; /*info: Enable this after jquery implementation*/
}
#notificationContainer:before { /*info: Popup Arrow*/
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle {
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody {
padding: 33px 0px 0px 0px !important;
min-height: 300px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
Какая версия jQuery? – phts