I’ve started playing around with JQuery in the last week, and I’m needing some help understanding what I am doing incorrectly. I’m sure this is very simple, but please be patient as I am learning.
End result: When you click “Open Menu” – then the notification menu opens. If you click outside of the ul class “.profiledrop” then the notification menu closes.
// Tab collapser // $('.notification-tab').click(function(e) { if ($(e.currentTarget).parent().hasClass('active')) { $('.notification-group').removeClass('active'); } else { $('.notification-group').removeClass('active'); $(e.currentTarget).parent().toggleClass('active'); } }); // Click outside collapser // $(document).on('click', function(e) { if ($(e.target).closest(".profiledrop").length === 0) { $(".profiledrop").hide(); } }); // Menu Launcher // $("#launch").click(function() { $(".profiledrop").show(); });
/* Notification Infastructure */ .profiledrop { display: none; width: 350px; height: auto; max-height: 600px; padding: 0; margin: 0; overflow-y: hidden; background: #eee; border-top: 4px solid #5B7042; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75); } .notification-group { border-bottom: 1px solid #e3e3e3; overflow: hidden; } .notification-tab { width: 100%; display: inline-block; border-bottom: 1px solid #e3e3e3; } .notification-list { height: 0px; max-height: 250px; padding: 0; overflow-y: auto; transition: height .5s; } .notification-list-item { display: block; min-height: 60px; overflow: hidden !important; box-sizing: border-box !important; padding: 15px 15px 15px 10px; font-size: 16px; border-bottom: 1px solid #e3e3e3 } .notification-list-item:nth-child(even) { background-color: #E3E3E3 } .notification-list-item img { clip-path: circle(); float: left; margin-right: 10px; width: 60px; height: 60px; object-fit: cover } /* Misc Settings */ .message::not(.nopic) { margin-top: 0px; margin-left: 80px } /* Style for notification groups without image */ /* Notification text styling */ .label { float: right; padding: 0px 7px; margin-top: 20px; margin-right: 10px; border: 1px solid #5B7042; border-radius: 15px; } h4 { margin-left: 10px } h4, .label { display: inline-block; } .message { margin-top: 0px } .date { float: right; color: darkgray } /* Active Section */ .active .notification-list { height: 250px; } .active .notification-tab, .notification-tab:hover { background-color: #5B7042 } .active .label, .notification-tab:hover .label { border: 1px solid white } .notification-tab:hover { color: white } .active .label, .active h4 { color: white } /* Responsive design */ @media only screen and (max-width: 514px) { body { margin: 0px } .profiledrop { width: 100%; margin: 0px; left: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://mrdansby.com/private/style.css"> <div class="dropdown-container"> <a href="#" id='launch'>Open Menu</a> <ul class="profiledrop"> <li class="notification-group nopic"> <div class="notification-tab"> <h4>Tasks</h4> <span class="label">1</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p> <span class="date">2m ago</span> </li> </ul> </li> <li class="notification-group"> <div class="notification-tab"> <h4>Behavior</h4> <span class="label">4</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/4.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">5s ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/23.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">15m ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">5h ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/13.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">3d ago</span> </li> </ul> </li> <li class="notification-group"> <div class="notification-tab"> <h4>Homework</h4> <span class="label">3/3</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> </ul> </li> </ul> </div>
Advertisement
Answer
When you click on menu you need to exclude it from you logic of closing the menu.
So create another if if (e.target.id != "launch") {
and wrap your closing menu logic in it. You where opening with one event and closing in same time with another:
$(document).on('click', function(e) { if (e.target.id != "launch") { if ($(e.target).closest(".profiledrop").length === 0) { $(".profiledrop").hide(); } } });
I would also suggest to use .toggle();
here so you can open and close menu by clicking the button:
// Menu Launcher // $("#launch").click(function() { $(".profiledrop").toggle(); });
EXAMPLE:
// Tab collapser // $('.notification-tab').click(function(e) { if ($(e.currentTarget).parent().hasClass('active')) { $('.notification-group').removeClass('active'); } else { $('.notification-group').removeClass('active'); $(e.currentTarget).parent().toggleClass('active'); } }); // Click outside collapser // $(document).on('click', function(e) { if (e.target.id != "launch") { if ($(e.target).closest(".profiledrop").length === 0) { $(".profiledrop").hide(); } } }); // Menu Launcher // $("#launch").click(function() { $(".profiledrop").toggle(); });
/* Notification Infastructure */ .profiledrop { display: none; width: 350px; height: auto; max-height: 600px; padding: 0; margin: 0; overflow-y: hidden; background: #eee; border-top: 4px solid #5B7042; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75); } .notification-group { border-bottom: 1px solid #e3e3e3; overflow: hidden; } .notification-tab { width: 100%; display: inline-block; border-bottom: 1px solid #e3e3e3; } .notification-list { height: 0px; max-height: 250px; padding: 0; overflow-y: auto; transition: height .5s; } .notification-list-item { display: block; min-height: 60px; overflow: hidden !important; box-sizing: border-box !important; padding: 15px 15px 15px 10px; font-size: 16px; border-bottom: 1px solid #e3e3e3 } .notification-list-item:nth-child(even) { background-color: #E3E3E3 } .notification-list-item img { clip-path: circle(); float: left; margin-right: 10px; width: 60px; height: 60px; object-fit: cover } /* Misc Settings */ .message::not(.nopic) { margin-top: 0px; margin-left: 80px } /* Style for notification groups without image */ /* Notification text styling */ .label { float: right; padding: 0px 7px; margin-top: 20px; margin-right: 10px; border: 1px solid #5B7042; border-radius: 15px; } h4 { margin-left: 10px } h4, .label { display: inline-block; } .message { margin-top: 0px } .date { float: right; color: darkgray } /* Active Section */ .active .notification-list { height: 250px; } .active .notification-tab, .notification-tab:hover { background-color: #5B7042 } .active .label, .notification-tab:hover .label { border: 1px solid white } .notification-tab:hover { color: white } .active .label, .active h4 { color: white } /* Responsive design */ @media only screen and (max-width: 514px) { body { margin: 0px } .profiledrop { width: 100%; margin: 0px; left: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown-container"> <a href="#" id='launch'>Open Menu</a> <ul class="profiledrop"> <li class="notification-group nopic"> <div class="notification-tab"> <h4>Tasks</h4> <span class="label">1</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p> <span class="date">2m ago</span> </li> </ul> </li> <li class="notification-group"> <div class="notification-tab"> <h4>Behavior</h4> <span class="label">4</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/4.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">5s ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/23.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">15m ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">5h ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/13.png"> <p class="message"><b>Student</b> was written up by Mr. Teacher.</p> <span class="date">3d ago</span> </li> </ul> </li> <li class="notification-group"> <div class="notification-tab"> <h4>Homework</h4> <span class="label">3/3</span> </div> <ul class="notification-list"> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> <li class="notification-list-item"> <img src="https://mrdansby.com/resources/pics/1.png"> <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p> <span class="date">3d ago</span> </li> </ul> </li> </ul> </div>