We Keep Coding

Bootstrap Navbar Toggler - Custom JS causes navbar menu to close on dropdown click

I'm new to JS and am in the process of learning while coding a website. I'm using a template that I found online with some custom modifications so I'm not super familiar with the JS used. Here is the issue.
While using the navbar toggler there is some custom JS to close the menu when the once a click happens in the menu. The issue is that I added a dropdown into the menu, and when it's clicked instead of showing the drop down details, the JS executes and closes the menu. here is the JS:
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
offset: 74,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
Only the bottom function is running the menu click/close function, but I provided all the code as for the custom menu actions as I'm not super familiar with JS. I understand, more or less, what it is doing, but I'm not sure how to modify it appropriately.
I'd imagine there is a simple way to modify that last "if" statement to check to see what was actually clicked (for example, if a .dropdown-menu was clicked). I just don't know how to use the code that is there and check what click caused the event trigger. I'd like to keep the close behavior when the .dropdown-items and other .nav-items are clicked. I just don't want the behavior when the .dropdown-menu is clicked.
Here is the html:
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#portfolio">Products</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#how-to-order">How Order</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
I'm pretty sure this is a super simple JS problem that any coder worth his $.02 would know, but not knowing JS I don't even know where or what to search for. Any help?

The issue with your code is that when you are using querySelectorAll to access the nav-links the code is trying to access all the nav-links i.e., you are considering all the nav-links then the dropdown in your nav which is also a nav-link is also considered. So the better way to solve this is you can create a new class and attach it to the dropdown nav-link in your case F.A.Q and exclude that class from the function.
Your code:
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
You can add a class called faq and exlude it from the querySelectorAll using :not()
<!-- added a new class faq to the dropdown link -->
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle faq" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
// select all links except faq class
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive a.nav-link:not(.faq)')
);

Just add the below scripts within your tags, preferably before the closing tag
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Select all unlinked items in a nested list with jquery

I have the following HTML
<ul>
<li><a ...>item 1</a></li>
<li>item 2
<ul>
<li><a ...>item 2-a</a></li>
<li><a ...>item 2-b</a></li>
</ul>
</li>
<li><a ...>item 3</a></li>
<li>item 4
<ul>
<li><a ...>item 4-a</a></li>
<li><a ...>item 4-b</a></li>
</ul>
</li>
<li><a ...>item 5</a></li>
<li><a ...>item 6</a></li>
</ul>
I want to add a class to 'item 2' and 'item 4' with jquery using .has but can't find a way.
I want to clarify my question:
I have a nested list with an unknown amount of items where some items are not linked. I want to add a class to all unliked items.

If you want to add the class depending to the content of the li you could use :contains selector :
$( "li:contains('item 2')" ).addClass('X');
Or filter and check text() content :
$( "li" ).filter(function(){
return $(this).text()==='item 4';
}).addClass('X');
If you want to add class using the index's use .eq() like Robiseb's answer show.
EDIT :
I don't know how many <li> without a link will be in the list. And I don't know what the text inside the <li> will be.
You could use :
$("li:not(:has(>a))").addClass('X');
Hope this helps.
$("li:not(:has(>a))").addClass('X');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a ...>item 1</a></li>
<li>item 2
<ul>
<li><a ...>item 2-a</a></li>
<li><a ...>item 2-b</a></li>
</ul>
</li>
<li><a ...>item 3</a></li>
<li>item 4
<ul>
<li><a ...>item 4-a</a></li>
<li><a ...>item 4-b</a></li>
</ul>
</li>
<li><a ...>item 5</a></li>
<li><a ...>item 6</a></li>
</ul>

Only selecting for list items without anchors, as clarified in the questions comments.
var parentList = $('ul'); // something more specific is assumed.
parentList.children('li').children().not('a').parent().addClass('some-class');
Using "contains" makes the solution dependent on content, not structure. Using "eq" or similar "nth"-like functionality is assuming that the given example is the only structure, whereas I think it is planned as generated code that may extend to a much longer length, but will always keep the structure defined in the snippet.

Try using .eq() documentation
$('li').eq(1).addClass('yourClass');
Be careful, eq starts to 0

Based on comments you want to check if it has a sub <ul>
$('li').has('ul').addClass('has-children');
// OR
$('li:has(ul)').addClass('has-children');

You can select item by your content, using :contains() selector
For more details: https://api.jquery.com/contains-selector/
Example: http://jsbin.com/nutekaxora/edit?html,css,js,output
$("li:contains('Item 1')").addClass('myClass');

Probably not the best way to do this, but use the "eq" method for this.
var first = $("ul").first();
$(first).find("li").eq(1).addClass("newClass"); /// This selects the second list item
$(first).find("li").eq(5).addClass("newClass"); // This selects the sixth list item
Here's a pen for this to show it in action.
http://codepen.io/raghavkanwal/pen/XjLjJM

Do you mean to detect all 'li' with 'ul' as a children?
https://jsfiddle.net/Ln3kt6ya/
May this example help you?
$('li').has('ul').addClass('error');

<style>
ul {color: #777777;}
ul.items-list {color: #880000;}
.your-class-name {color: #008800;}
</style>
<body>
<ul class="items-list">
<li><a>item 1</a></li>
<li>item 2
<ul>
<li><a>item 2-a</a></li>
<li><a>item 2-b</a></li>
</ul>
</li>
<li><a>item 3</a></li>
<li>item 4
<ul>
<li><a>item 4-a</a></li>
<li><a>item 4-b</a></li>
</ul>
</li>
<li><a>item 5</a></li>
<li><a>item 6</a></li>
</ul>
</body>
<script>
var $list = $('ul.items-list');
$list.children('li:nth-child(2), li:nth-child(4)').addClass('your-class-name');
</script>

javascript horizontal menu click to open

Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>

Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>

I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)

Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle

Show image with onMouseOver, with image being outside of li-tag

I have done this before, but this time I had to move the image outside of the li-tag for the positioning to be how I want it to be. This is how my html code looks, for each 'practicum' I want to have the corresponding 'voorbeeld' to show on hover.
<ul>
<li><a id="menuKop" href="">Practicum 1</a></li>
<li><a id="menuKop" href="">Practicum 2</a></li>
<li><a id="menuKop" href="">Practicum 3</a></li>
<li><a id="menuKop" href="">Practicum 4</a></li>
<li><a id="menuKop" href="">Practicum 5</a></li>
</ul>
....rest of code....
<img id="voorbeeld1" src="Voorbeeld1.jpg" alt="voorbeeld1" />
So I wanted to do that in JavaScript, but I really have no idea how to. Does anyone have a link to a site where this gets explained? Since I think finishing this whole project would be too much to ask. Or maybe just a hint in what I should be looking for.
So far I have been experimenting with an 'onmouseover' function, but I can't get it to work. Any tips/hints? Thanks in advance!

How about this?
<ul id="Preview">
<li><a id="menuKop1" data-image="pic1" href="">Practicum 1</a></li>
<li><a id="menuKop2" data-image="pic2" href="">Practicum 2</a></li>
</ul>
<img id="pic1" class="hide" src="http://i.imgur.com/vZzIm2t.jpg" alt="voorbeeld1" />
<img id="pic2" class="hide" src="http://i.imgur.com/yQdM1dk.jpg" alt="voorbeeld1" />
jQuery:
$(".hide").hide();
$('#Preview a').hover(function() {
var img = '#'+$(this).data('image');
$(img).show();
}, function() {
var img = '#'+$(this).data('image');
$(img).hide();
} );
jsfiddle
Is that what you want to accomplish?

jQuery question from a person who can't javascript

So I'm trying to adapt this Dropdown menu on Joomla the styles work great as expected so I'll post the javascript includes on the head of my website:
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/dropdown.js'></script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy();
});
</script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy({speed: 100});
});
</script>
ok I don't know why its is not working I'll post the dropdown.js should I post the jQuery too? it's really big!
$.fn.droppy = function(options) {
options = $.extend({speed: 250}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 500);
}
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
$('ul, li', this).hover(show, hide);
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);
});
};
My question here is: Why is it not working! I know that this is really complex (I don't anything about JavaScript) but if you help me I'll post a tutorial and edited files that will help a lot of people!
By the way I've download jQuery from the original site so I don't think that this can be the problem!
Thanks in advance!
Here is the HTML generated from 2 levels til the UL:
<div id="topmenu">
<div class="moduletabledropdown">
<ul class="menu">
<li id="current" class="first level0 home active"><span>Home</span></li>
<li class="level0 parent faq"><span>FAQ</span><ul class="level1">
<li class="first last level1 item-01"><span>Item 01</span></li></ul></li>
<li class="level0 parent the-news"><span>The News</span><ul class="level1"><li class="first last level1 item-02"><span>Item 02</span></li></ul></li>
<li class="level0 web-links"><span>Web Links</span></li><li class="last level0 parent news-feeds"><span>News Feeds</span><ul class="level1"><li class="first last level1 item-03"><span>Item 03</span></li></ul></li></ul></div>
Here is the HTML for a page that does work pure HTML CSS:
<html>
<head>
<title>droppy - Nested drop down menus</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type='text/javascript' src='assets/jquery.js'></script>
<link rel="stylesheet" href="assets/project-page.css" type="text/css" />
<!-- per Project stuff -->
<script type='text/javascript' src='javascripts/jquery.droppy.js'></script>
<link rel="stylesheet" href="stylesheets/droppy.css" type="text/css" />
<!-- END per project stuff -->
</head>
<body>
<div id='container'>
<h1>
droppy
<span class='subtitle'> - Nested drop down menus</span>
</h1>
<div id='sidebar'>
<ul id='project-nav'>
<li><a href='#overview'>Overview</a></li>
<li><a href='#example'>Example</a></li>
<li><a href='#usage'>Usage</a></li>
<li><a href='#download'>Download</a></li>
<li><a href='#known-issues'>Known Issues</a></li>
</ul>
<ul id='ohoa-nav'>
<li><a href='http://onehackoranother.com/projects/'>Back to projects »</a></li>
<li><a href='http://onehackoranother.com/'>Back to onehackoranother.com »</a></li>
</ul>
<a href='http://thepixeltrap.com' id='pixel-trap' title='The Pixel Trap: New Directory for Web Professionals'>
<img src='http://onehackoranother.com/images/pixel-16.png' alt='' /> The Pixel Trap - A New Directory for Web Professionals
</a>
</div>
<div id='main'>
<h2 class='first' id='overview'>Overview</h2>
<p>Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like
this for a recent project and a quick Googling turned up nothing that really suited,
so droppy was born. It hasn't been designed with flexibility in mind - if you like
what you see, great, integration should be a breeze - otherwise I'd look for something
more configurable elsewhere.</p>
<h2 id='example'>Example</h2>
<ul id='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li>
<a href='#'>Sub 2 - 2</a>
<ul>
<li>
<a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li>
<a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script>
<h2 id='usage'>Usage</h2>
<p>No mandatory configuration options or nothin' here, just use include the Javascript/CSS
resources and insert the following code in your document head, or any other
suitable place:</p>
<div class='caption'>Javascript:</div>
<pre><script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script></pre>
Don't mind unclosed divs that is not the full code!

Can you post some of your drop down menu HTML?
Right now you are applying the droppy plugin to the selector '.menu', which looks for an element on your page that has the CSS class 'menu', is that what you intended? If you want to apply the dropdown to an element with id="menu" you would use $('#menu').
Update
I would recommend using superfish instead, the mechanics of drop down menus are really hard to get right to make the menus easy to use. Superfish does an excellent job of being very forgiving for the site visitors.
I can't find anything particularly wrong with the code, seems to work ok. The only change I had to do to get it to work was to initially set the submenus to hidden using CSS. Try this out, you'll need to add your CSS back into the HTML. I would suggest using Firefox, Firebug and Firequery. This will give you insight into what exactly is breaking if there are any JavaScript errors.
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.droppy.js"></script>
<style>
ul#nav li ul {
display: none;
}
</style>
</head>
<body>
<h2 id='example'>
Example</h2>
<ul id='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li><a href='#'>Sub 2 - 2</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$('#nav').droppy();
});
</script>
</body>
</html>

Since your <script> block is in the <head> tag, it executes before the page body is loaded, when there is no .menu element
You need to move your <script> block to the end of the <body> tag, or wrap it in $(function() { ... });.