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');
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 building a sidenavigation bar for my dashboard and in the process of building it, found a good tutorial which has built something similar. I'm planning to use this as a base work and will customise it afterwards. In the tutorial, the dynamic things have been handled using Jquery. Since I'm using Angularjs for my development, I want to do it Angular way. Can anyone please explain me how can I accomplish it.
Following is the link to tutorial.
Code snippets:
$("#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();});
How can I convert it to do line Angular way ?
Thanks
Replace this bind event with a View/Controller mapping
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
In the view
<div id="menu-toggle" ng-click="toggleClass"></div>
Then in your angular controller
$scope.toggleClass = function(){
angular.element('#wrapper').toggleClass('toggled')
};
You can do the same for this one
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
initMenu can be triggered in your main controller, just replace the $ with angular.element
If there are no old browser compatibility requirement, you should start using CSS3 class for transition instead of JS due to css perf vs js perf
function initMenu() {
angular.element('#menu ul').hide();
angular.element('#menu ul').children('.current').parent().show();
}
initMenu();
For the $('#menu li a').click() event, same, use the View/Controller mapping
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();
How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})
Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/
I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle