In my template, I have used the same tree structure code as used in this question. The answer to that question opens the page up with the tree entirely collapsed (jsfiddle).
However, I would like to implement this such that when first opening the page all the top level directories of the tree are collapsed (in the top example the Parent folders), but clicking on one of the top level directories will fully open up all the child branches. Right now it will only open one level down. I would appreciate any help with accomplishing this.
Current Javascript for tree is below.
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li ul > li').hide();
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
Try changing
var children = $(this).parent('li.parent_li').find(' > ul > li');
to
var children = $(this).parent('li.parent_li').find('li');
Related
I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});
You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle
I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/
I'm trying to make buttons in a side-bar navigation (using the bootstrap framewrk) close or collapse onclick.
If you follow the link below to see a working template you'll see what I mean - the left hand column has a button called "ShortCut" which if clicked allows a dropdown of other links which works great....
However....I'd like it so that when it is clicked again it closes and reverts to as it was originally...
http://seegatesite.com/bootstrap/simple_sidebar_menu.html
My thoughts are that it is something to do with javascript which is below:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
The line below must be able to do what I am trying to do - I just cant figure it out...thanks for all help...
$('#menu li a').click(
nav-pills is only a css style that doesn't have a js actions.
Perhaps you're confused.
.
Possibly you can use Accordion(http://getbootstrap.com/javascript/#collapse-example-accordion) with nav-pill styling,
or use jquery .slideUp() and .slideDown() to get it done manually.
http://api.jquery.com/slideup/
http://api.jquery.com/slidedown/
.
The code you provided uses following part to collapse/open
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
I could be misunderstanding your question, but you can always hide a pill by removing the "active" class.
$('#item').removeClass('active');
I need to make menu with multi-level sub menus for mobile.
This is dynamic menu, so I can not add more classes to html.
Menu is sliding down when I click on element which have child .sub-menu:
> ul.sub-menu
But when I want to click another (deeper) element in same node all this node menu is going to slideUp.
Here is my code:
jsFiddle
For example:
First > 03 > (closing) > First > (03 is opened) > 03-02 > (closing) > First > 03 > (closing) > First > My node to element 03-02-02 is already opened.
Thanks for advance for your help
FULL SOLUTION HERE:
jsFiddle
Try using this to solve the issue
var test1 = $( '#menu-mobile-slide ul.menu li' );
test1.on( 'click', function(e) {
e.preventDefault();
var mobileMenu = $(e.target).parent().find( '> ul.sub-menu' );
if( mobileMenu.css('display') == 'none' ) {
mobileMenu.slideDown();
e.stopPropagation();
} else {
mobileMenu.slideUp();
e.stopPropagation();
}
});
You can try to bind the click events to every a(instead of li) and find the submenu to slide up/down with siblings() function.
You can also use slideToggle() to open/close submenus.
The click is prevented only if is present a sibling ul.
var test1 = $('#menu-mobile-slide li > a');
test1.on('click', function(e) {
var mobileMenu = $(this).siblings('ul');
if (mobileMenu.length > 0) {
e.preventDefault();
}
mobileMenu.slideToggle();
});
Having a few issues with this badboy:
Basically need it so that when one of the hidden lists collapses the markup is checked to see if there are any other 'active' lists already open, and to close those before a new one is opened. It looks messy if more than one is open at the same time.
Link:
http://www.matchboxlondon.com/ten/menu3/index.html
Try:
1. Click Menu
2. Click Services
3. Click Pilates to expand
4. Click Fitness to expand
Problem: Heading is also removed when .slideup() is used.
What my code is doing at the moment is checking to see if anything is opened with a globally defined variable called 'somethingOpen' - this is set to null on page load. This is all well and good BUT I feel it may have something to do with the complete display:none of the collapsable lists:
Because it's listy and nesty, I'll only include the js in here and not the markup:
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // <-- problem here
somethingOpen = false; // closing so set to false
return false; // exit function
});
} // End somethingOpen if
// Open
var checkElement = $(this).next(); // more checks
$(this).closest('li').addClass('active'); // add active class
somethingOpen = true; // redefine if anything is open
// Close
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
somethingOpen = false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
// Returns
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
}); // End click
Try This:
//$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // -- problem here
$("#cssmenu > ul > li.active").animate({height: "toggle", opacity: "toggle"}, 'fast');
For anyone that was interested, it needed a little tweaking, using children() and an after (>) to properly select the right element.
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu").children('.active').removeClass('active');
$("#cssmenu > ul > li > ul").slideUp('normal');
somethingOpen = false; // closing so set to false
return false; // exit function
}); // end each
}
}); // End somethingOpen if
I want to build a tree using bootstrap like the one in the link http://jsfiddle.net/jhfrench/GpdgF/
I've manage to close all tree branches by adding the following line in script
$('.tree li').hide();
$('.tree li:second').show();
but this isn't what i want.
I want to close some branches of the tree and open others:
here is the script i use:
<script>
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
</script>
-i have some ideas how to make this work, but i have no idea how to implement it
my idea is to ad an attribut to a tag in html and in javascript to read that attribute and all of its children to hide
P.S also i would appreciate if you have an idea how to close a hole level of children not just one
After a long search and try-error methods , i've manage to find a solution for closing at a custom level of children
here is the solution for lvl 3 children
$('.tree li>ul>li>ul').hide();
$('.tree li:first').show();