I'm trying to do a show / hide menu button using jQuery.
The menu is contained in a div, and I am trying to setup a button to show and hide it. Here's my code:
<div class="menu">
<div id="items">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>
JS:
<script>
//DOM loaded
$(document).ready(function() {
// Hide the top info bar
$('#btn-hide').click(function(){
$("#items").toggle("slow");
});
});
</script>
The problem is when I click the button, it hides the content, and then it shows it again... Any idea where I'm wrong?
This works fine for me but one thing you could try:
$('#btn-hide').click(function(e){
e.stopImmediatePropagation();
$("#items").toggle("slow");
});
This will stop any other "clicks" on that element or parent elements.
http://api.jquery.com/event.stopimmediatepropagation/
Related
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I am working on one scenario in that I have menu which toggle on one button.
When I click on that Menu button it opens fine.
Problem persist with this code:
When I click on anywhere it toggle with open and close.
Now What I need is
When I click on anywhere on window menu should close but only when it is in open state. toggle only when it is in open state.
HTML Code :
<section id="wrapper"> <!-- Sidebar -->
<aside id="sidebar-wrapper">
<div class="togglebtn"></div>
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#" class="ripple">
<div class="icon"><i class="demo-icon icon-meeter"></i></div>
<div class="nav-label"> <span>Dashboard</span></div>
</a>
</li>
</ul>
</div>
</aside>
</section>
JavaScript code:
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#wrapper").toggleClass("toggled");
});
$("body").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Any help would be much appreciated.
Just change your $("body").click function:
$("body").click(function () {
$("#wrapper").removeClass("toggled");
});
Right now what's happening is that you are "toggling" the class every time any part of the body is clicked. Toggling turns a class on or off depending on its current state. You need to just ensure that it is removed when the body is clicked.
You can actually use toggleClass to accomplish this, but you must tell it you are wanting to remove the class by passing it a state parameter.
$("#wrapper").toggleClass("toggled", false);
See the jQuery documentation for toggleClass: http://api.jquery.com/toggleclass/
Sorry if this is a silly question, I'm very new to JS/JQuery and don't know if there's a simple answer to my problem.
I have two toggling divs set up more or less like the following (this is the stripped-down version):
<div id="top-story-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
<div id="toc-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
With this function, the two divs toggle back and forth without a hitch, but if you click on one of the toggles ("top stories"/"all stories", respectively) and then click it AGAIN it hides the div it just showed and... can't find anything else to replace it with. Both divs are hidden now and there's no way for the user to interact with either div.
jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
$toggle= $("#top-stories, #toc");
$toggle.on('click', function(e) {
var $id;
e.preventDefault();
$icons.removeClass('hidden');
$id=$('#'+this.id+'-panel'); //get menu id
$contentPanel.fadeOut(10);
if(! $id.is(':visible')) {
$id.fadeIn(450)
preloadImages: 'all';
$(this).addClass('hidden');
}
});
});
I'm assuming that if I place the toggles outside of their respective divs, I won't have this problem -- but is there a code workaround for the toggle to stay within the div?
Thanks so much for all of your help ;_;
So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/
Check out http://jqueryui.com/demos/draggable/
At the bottom there's a tabbed section. The seconds tabs "Details" gives the example of exactly what I want to accomplish. You can show/hide each row, and you can show/hide the details within that list row.
Is this part of the jQuery UI? If so, does anyone happen to know what it's called?
It is part of jQuery. It is just a simple hide and show on another div.
<div class="Control">Toggle</div>
<div class="Content" style="display: none;">Some content you want to toggle.</div>
<script>
$(".Control").click(function(){
$(this).next(".Content").toggle();
});
<script>
Your elements can change to anything you want, LI, IMG, DIV.
here is a simple accordion
if you don't want them all to hide. remove this line $('.contentblock').not(c).hide();
<ul id="accord">
<li>
title
<div class="contentblock">Content</div>
</li>
<li>
title2
<div class="contentblock">Content2</div>
</li>
</ul>
then ...
$(function () {
$('.contentblock').hide();
$('#accord').delegate('li > a','click',function () {
var c = $(this).parent().find('.contentblock').toggle();
$('.contentblock').not(c).hide();
})
});