I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>
Related
I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.
The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).parent().find("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
$(document).ready(function(){
$("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I am trying to grab the text of what is clicked
Upon finding a jquery flyout menu, I can see that the css is on hover changing its color so i did add in a
I created a fiddle with the html,css and javascript that shows the code i'm working with
http://jsfiddle.net/bthorn/rcfgt0kj/
I know that I am in the right spot as i added in this code to debug with a click , then "this" but what I don't know is how to grab the text of the hover "this" simply grabs way too much.
$(".flexdropdownmenu").click(function () {
console.log('click');
console.log(this);
});
HTML (it is in the fiddle)
<div id="wrap">
<input type="text" data-flexmenu="flexmenu1" value="dropdown">
<!--Chose Status-->
<!--HTML for Flex Drop Down Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li>
CCO
<ul>
<li>Sub Item 3.1a</li>
<li>Sub Item 3.2a</li>
<li>Sub Item 3.3a</li>
<li>Sub Item 3.4a</li>
</ul>
</li>
<li>
Item Folder 5a
<ul>
<li>Sub Item 5.1a</li>
<li>
Item Folder 5.2a
<ul>
<li>Sub Item 5.2.1a</li>
<li>Sub Item 5.2.2a</li>
<li>Sub Item 5.2.3a</li>
<li>Sub Item 5.2.4a</li>
</ul>
</li>
</ul>
</li>
</ul>
try the below code
$(".flexdropdownmenu").click(function (e) {
console.log($(e.target).text());
})
;
I create this nested list to show and hide items but I want ask how can I show one list and hide other for example if user click on second subject will hide all open items
HTML
<ul>
<li class="subject">List item 1 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 2 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 3 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
javascript
$(function(){
// $("ul li").children().slideDown("slow");
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
});
})
CSS
#item
{
display: none;
}
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
$(this).siblings().children('ul').slideUp();
});
DEMO
or
$(".subject").click(function () {
$(this).find("#item").slideToggle("slow")
.end().siblings().children('ul').slideUp();
});
DEMO
I corrected your markup. Your IDs should always be unique; otherwise use classes.
$(function(){
$(".subject").click(function(){
$('ul.item').not( $(this).find('ul.item') ).slideUp("slow");
$(this).find('ul.item').slideDown('slow');
});
});
WORKING JSFIDDLE DEMO
I have a jQuery function which is suppose to slide down and up the sub menu under some <li> elements.
<li class="subtop">Sample 1
<ul class="sub-menu">
<li>Sample 1 - 1</li>
<li>Sample 1 - 2</li>
</ul>
</li>
.....
<li class="subtop">Sample 6
<ul class="sub-menu">
<li>Sample 6 - 1</li>
<li>Sample 6 - 2</li>
</ul>
</li>
and the jquery is like:
$(".subtop").click(function(ev){
ev.stopPropagation();
$(this).each(function(){
$(".sub-menu", this).slideToggle();
});
});
the code is sliding the clicked element's sun menue up and down but I am not able to close existing open sub-menu when I click on another subtop can you please let me know how to do this?
Thanks
Try this:
$(".subtop").click(function(ev){
ev.stopPropagation();
$(".sub-menu").slideUp();
$(this).each(function(){
$(".sub-menu", this).slideToggle();
});
});