How to include <a> tag sibling in dropdown menu function onclick?
I've got a nav that has a js sub-menu that drops down on click.
Here's the js code:
// dropdown button
var mainMenuDropdownLink = $('.nav-menu .menu-item-has-children > a, .nav-menu .page_item_has_children > a');
var dropDownArrow = $('<a href="#" class="dropdown-toggle"><span class="screen-reader-text">toggle child menu</span>+</a>');
mainMenuDropdownLink.after(dropDownArrow);
// dropdown open on click
var dropDownButton = mainMenuDropdownLink.next('a.dropdown-toggle');
dropDownButton.on('click', function(e){
e.preventDefault();
var $this = $(this);
$this.parent('li').toggleClass('toggle-on').siblings().removeClass('toggle-on').find('.toggle-on').removeClass('toggle-on');
});
You can see the staging site here. (The html code is pretty messy so I didn't post it here.)
http://local.curesstudio.com/service-type/skincare/
Notice the + plus sign in the nav. That's the dropdown menu. I'd like to make the whole menu activate the dropdown. So clicking on LASHES + BROWS activates the submenu.. Still a noob with js so go easy on me. Thanks.
Try to add all the <a> elements in a div and then apply hide show on that div on click.
<div class="dropdown">
<button onclick="showDropdown()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Your Solution:
// dropdown button
var mainMenuDropdownLink = $('.nav-menu .menu-item-has-children > a, .nav-menu .page_item_has_children > a');
var dropDownArrow = $('<a href="#" class="dropdown-toggle"><span class="screen-reader-text">toggle child menu</span>+</a>');
mainMenuDropdownLink.after(dropDownArrow);
// dropdown open on click
//var dropDownButton = mainMenuDropdownLink.next('a.dropdown-toggle'); ----no need for this now
$('.lashes_brows, .dropdown-toggle').on('click', function(e){
e.preventDefault();
var $this = $(this);
$this.parent('li').toggleClass('toggle-on').siblings().removeClass('toggle-on').find('.toggle-on').removeClass('toggle-on');
});
just remember to give your lashes and brows <a> element a new class named lashes_brows like this
<a href="#" class="lashes_brows">LASHES AND BROWS</a>
上一篇: 传递可见图像的ID