HTML:
<div id=wrapDesktopNavBar>
<ul class="desktopNavBar">
<li><a class="firstLevel" href="#">header 1</a>
</li>
<li><a onclick....></a><a class="firstLevel" href="#">header 2</a>
<ul>
<li><a class="secondLevel" href="#">1st sub header</a>
<li><a class="secondLevel" href="#">2nd sub header</a>
<li><a class="secondLevel" href="#">3rd sub header</a>
</ul>
<li><a class="firstLevel" href="#">header 3</a>
</li>
</ul>
</div>
JS:
$(function () {
$('.mainNavSection').hide();
$('.desktopNavBar a').bind('click', function (e) {
$('.desktopNavBar a.current').removeClass('current');
$('.mainNavSection:visible').hide();
$(this.hash).show();
$(this).addClass('current');
$(this).closest('.desktopNavBar > li').find('a:first').addClass('current');
e.preventDefault();
}).filter(':first').click();
});
Hi the above is my html and javascript. I have a class called "current" which simply underlines the header and its subheader when it's being clicked. I want to allow the main header to be underlined when the sub header is being clicked. I've tried $(this).closest('.desktopNavBar > li').find('a:first').addClass('current'); but it only underlines the first a tag and not the second a tag. I want the 2nd tag to be underlined. And, i can't swap my 2nd tag with my 1st a because it affects smth else.
is there soemthing like .find(a:second) to allow me to add class to the 2nd a tag?
Related
I am hiding 'hidden-items' class li elements using jquery and want to show them once more tag link is clicked. The jquery part is working, but all the list items are being showed.
I searched about this and found out about 'this' selector. But I am confused on how to use this to show items that are close to more tags link.
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery('.hidden-items').show();
});
});
</script>
Based on the structure of your HTML, you can use .prev() and .find() with this like:
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
just use $(this) for the selection of the current clicked element.
then use .parents('.classNameOfParent') to get the parent element
then hide the parent element
.hide()
you could do this like that:
$(this).parents('.classNameOfParent').hide()
good luck!
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).closest(".tag-box").find('.hidden-items').show();
});
});
Hope it helps. Thanks.
You can do it like this
jQuery(this).siblings('.gk-tags').find('.hidden-items').show();
I am trying to create a Bootstrap dropdown menu with two sub-menus. My problem is that the dropdowns are dynamically created after the document is loaded, and don't respond to how I would normally get them to work.
How I would normally go about it would be
$(document).ready(function(){
addItem(); //adds the first instance of the drop down
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
});
But this obviously doesn't work for dynamically created content. I saw elsewhere online that this would work for dynamic content;
//still has first instance of dropdown, just later in the doc
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
but for the life of me, I can't figure out why this doesn't work. What I'm seeing is that it is adding the open class to the sub-menu, but toggle the parent menu(not stopping propagation?) So, my question is, why doesn't the second one execute as expected, and how can I make it?
List structure for reference:
<div class="dropdown open">
<button id="select0" class="btn new-btn" data-toggle="dropdown" aria-expanded="true">Select Your Item <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="sub" data-toggle="dropdown">Item 1</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="6">Item 1.1</a></li>
<li><a data-def-cost="8">Item 1.2</a></li>
</ul>
</li>
<li><a class="sub" data-toggle="dropdown">Item 2</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="5">Item 2.1</a></li>
<li><a data-def-cost="3">Item 2.2</a></li>
</ul>
</li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 3</a></li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 4</a></li>
<li><a data-plu="xyz" data-def-cost="10.00">Item 5</a></li>
<li class="dropdown-header">Other Items</li>
<li><a data-plu="143">Item 6</a></li>
<li><a data-plu="xyz">Item 7</a></li>
<li><a data-plu="xyz">Item 8</a></li>
</ul>
<input type="text" class="hidden" name="input1">
<input type="text" class="hidden" name="otherinput1">
</div>
$(this).siblings() points to an ul element, however, the .open class is supposed to be added to the parent li : http://getbootstrap.com/javascript/#dropdowns-usage.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
Here is a suggestion (inspired by the following code snippet : Multi-Level Dropdowns) :
$(document).ready(function () {
// this variable keeps track of the last open menus
// in order to close them when another link is clicked
// or when the entire dropdown is closed
var open;
$("#my-dropdown").on("hide.bs.dropdown", function () {
if (open) open.removeClass("open");
});
$(".dropdown-submenu > a").on("click", function (e) {
if (open) open.removeClass("open");
open = $(this).parents(".dropdown-submenu");
open.addClass("open");
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="my-dropdown">
<button type="button" data-toggle="dropdown">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li class="dropdown-submenu">
Submenu 1
<ul class="dropdown-menu">
<li>Action 1.1</li>
<li>Action 1.2</li>
</ul>
</li>
<li class="dropdown-submenu">
Submenu 2
<ul class="dropdown-menu">
<li>Action 2.1</li>
<li>Action 2.2</li>
<li class="dropdown-submenu">
Submenu 2.3
<ul class="dropdown-menu">
<li>Action 2.3.1</li>
<li>Action 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unsure as to efficiency of my solution, but I rearranged the order a bit, and forced the parent to stay open
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
$(this).siblings().removeClass("open");
$(this).parent().addClass("open");
$(this).parent().parent().parent().addClass("open");
e.stopPropagation();
e.preventDefault();
});
and this solved my issue
use one of these below lines.
$(this).siblings('.dropdown-menu').removeClass('open');
$(this).next('.dropdown-menu').removeClass('open');
How can I filter the content of a div using data-filter and highlight current link at same time?
In this example the 'Item A' should be loaded as current item. The current item should have the text-bold class.
jsFiddle
<ul class="menu">
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="1">Item A</a>
</li>
<li class="menu-list js-menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="2">Item B</a>
</li>
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="3">Item C</a>
</li>
</ul>
try this code:-
$(function(){
//this is for first page load
$('a[data-filter="1"]').addClass('text-bold');
filter(1);
//when click on anchor tag
$('.menu-list a').click(function(){
$('.menu-list a').removeClass('text-bold');
$(this).addClass('text-bold');
var data=$(this).data('filter');
filter(data);
});
});
and create a function:-
function filter(filter){
$('.container [data-filter]').hide();
$('.container [data-filter="'+filter+'"]').show();
}
Demo
I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});
Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>
I have some javascript that will find the current URL and set as li to class active. What I then need it to do so that the accordion menu will function correctly is to replace the URL in the associated a href with "#".
ie.
<li><a id="Create" href="../Create/Create.html"> Create</a>
needs to be changed to:
<li><a id="Create" href="#"> Create</a>
Here is my html:
<ul class="topnav">
<li class="">
<a id="Dashboard" href="../dashboard/dashboard.html"> Dashboard</a>
</li>
<li><a id="Create" href="../Create/Create.html"> Create</a>
<ul>
<li><a id="Monster" href="../Monster/Monster.html"> Monster</a>
<ul>
<li><a id="Custom" href="../Custom/Custom.html"> Custom</a>
<ul>
<li><a id="New" href="../New/New.html"> New</a></li>
<li><a id="Drafts" href="../Drafts/Drafts.html">> Drafts</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And current Javascript that will give the current page a class of "active" on the corresponding "li" tag.
var url = window.location;
$('ul.topnav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
This would be easily achieved utilizing the ID:
document.getElementById("Create").href="#";
but this is not an option due to the magnitude of the site. It needs to be done via javascript.
I've tried to do this with
document.getElementByClassName('li.active a').href="#";
but that is not working. I'm also concerned this might strip out all hrefs under that li.
Any help would be greatly appreciate!