I create a menu for mobile version, and I face some problems with my script.
This is my code of menu slideToggle(); function :
$('.menu ul li').on('click', function(){
$('.menu ul li ul').slideToggle();
});
Jsfiddle demo.
When I click on menu parent, all child's will appear, for example : I want to appear only the child's of the menu parent(1) clicked, and I want something like radio button when I click on another parent(2) the childs of parent(1) disappear and the childs of parent(2) appear.
That's it, thanks!
Note : Resize the window of result section to see the mobile version.
Check this Fiddle
Js:
$('.menu ul li').on('click', function(){
$(".menu ul li").not(this).find('ul').slideUp();
$(this).find('ul').slideToggle();
});
Related
I have tried several different venues and ultimately came back to this which allows me to toggle them on and off individually but also I can open one dropdown and then also open another dropdown without the first closing. I want to be able to toggle them on and off as well as close all others when one is toggled on.
$('.list > li a').click(function () {
$(this).parent().find('ul').toggle();
});
Hide all toggles first and then show which is clicked.
Note: I have removed the <a> tag and took the click on to the <li> element itself:
$('.list > li').click(function () {
$('.list li').hide();
$(this).find('ul').toggle();
});
you can hide all other elements first and then toggle current element.
$('.list > li a').click(function () {
$('.list > li a').not(this).parent().find('ul').hide();
$(this).parent().find('ul').toggle();
});
I have the default wordpress menu which displays sub navigation links on hover but I'm wanting to show the sub navigation only when the user clicks the parent link. You can see my menu here https://jsfiddle.net/foley13/83sk1p1x/
I have a little javascript that should do this but isn't working.
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
});
I don't know if CSS is preventing this working but I just want to remove the hover and just have click.
You have troubles with li:has(ul). Just add class "dropdown" to these li, which have dropdown. ;)
Here is the code that works for me, I turned on jQuery in jsFiddle:
https://jsfiddle.net/83sk1p1x/2/
(function(){
//Hide all the sub menus
$('li.menu-item-has-children').hover(function(){
$('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"});
return;
});
$("li.menu-item-has-children").click(function(e){
e.preventDefault();
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
})();
However, in WordPress (due to its issues with jquery's $) you will have to write the function this way:
(function($){ ...
// code
}(jQuery);
Try this
Script
$(function(){
$("li:has(ul)").click(function(){
$(this).toggleClass("hover");
});
});
And in css you need to replace :hover with .hover
Check working fiddle
Thankyou for your help but I managed to solve my issue by still having my original script:
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle('fast');
$(this).toggleClass("down");
});
});
but I removed the left: -999em; from the .sub-menu and .sub-menu ul and this resolved the hover issue
I am designing a tabs of my own for tab navigation I used google api and jquery.
Here my fiddle,
http://jsfiddle.net/raghavendram040/fk7y2d5L/2/
but in fiddle i didnt add google api link.
Here is my js code
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
$("header ul li a").click(function(e) {
e.preventDefault();
$("header ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
var tabtitle=$(this).attr("title");
$.show('#tab'+tabtitle);
});
});
Here I am trying is on click of each tag i am trying to display respective div tag. But I cant able to do it. can any one help me in this.
Try this : You don't need google api for this. Just include jquery library in your html page as shown below. Put your code inside $(function(){..}); which will ensure that script applies after loading whole DOM structure.
For more information on jQuery visit - JQuery.com
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function()
{
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function(e) {
e.preventDefault();
// remove active class from all tabs
$("header ul li a").removeClass("active");
// hide all tab div
$('div[id^="tab"]').hide();
//add active class to clicked tab
$(this).addClass("active");
// show clicked tab content div
var tabtitle=$(this).attr("title");
$('#tab'+tabtitle).show();
});
});
Demo
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fk7y2d5L/11/
$(function () {
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function (e) {
e.preventDefault();
// Remove the active class from any anchors that have it
$("header ul li a.active").removeClass("active");
// Add active to the selected anchor
$(this).addClass("active");
var tabtitle = $(this).attr("title");
// Hide all divs that start with id=tab
$('#main div[id^=tab]').hide();
// Show the selected div
$('#tab' + tabtitle).show();
});
// initial hide of all tabs
$('#main div[id^=tab]').hide();
// Trigger initial selection
$('header a.active').trigger('click');
});
First of all you need to hide the tabs, lets say that you do so by adding a class tab for all corresponding <div>'s along with the following css
.tab {
display:none;
}
Then set the initially active tab as visible by applying the class visible given below to it.
div.tab.visible {
display:block;
}
Now you can use the following JS to make it work:
$("header ul li a").click(function (e) {
e.preventDefault();
$(".active").removeClass("active"); // you don't need to iterate over using each
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$("#main div.tab.visible").removeClass("visible"); // hide actve tab
$('#tab' + tabtitle).addClass("visible"); // show selected tab
});
Updated Fiddle
Side note: I added the missing tab blog and added the corresponding text for the demo
Firstly. No need for anything other than just jQuery.
Secondly: Personally, I would default all the tabs to being hidden, and only showing them when the "active" class is on them.
Also, you might want to add some actual class names to the tabs and the tab-content so you have better control. ".tab" for the tabs, and ".tab-content" for the content.
The javascript code is then fairly simple and understandable:
$(function()
{
$(".tab").click(function(e) {
e.preventDefault();
$(".tab.active, .tab-content.active").removeClass("active");
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$('#tab'+tabtitle).addClass("active");
});
});
JSFiddle with new class names
I have a simple jQuery accordion which works... almost perfectly :)
As you can see from the demo, I currently have the navigation "open" as I'm in the "Team" page.
Is it possible when I click 'About Us', it closes the element altogether. As you can see from the demo it closes it, but then quickly re-opens it. I guess this occurs because of the code on line 27 of my CSS.
Here is my demo: http://jsfiddle.net/URYzK/5/
Here is my JavaScript:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
});
Many thanks for any help here.
Remove display:none from #accordian ul and remove the .children CSS entirely. I believe this creates the behavior you want. You were setting the children ul to be display:none, and then trying to force .children, which is a ul, to be display:block later, which is why they were fighting.
Updated your jsFiddle as well.
I'm trying to make slide navigation. Here is my code
html
<li>
Services
<div class="subcategories">
Cleaning
</div>
</li>
The subcategories div is hidden.
js
$('li a').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});
This code works. The problem is that when the mouse goes out of the li a the subcategories div disappears.
What i want is that when the user point the li a the subcategories div to be shown so the user be able to click on some link of the sub navigation.
Try this please Demo http://jsfiddle.net/QEkDa/ or http://jsfiddle.net/qmrHm/
Please let me know if I missed anything!
Hope rest fits the cause :)
code
$(".subcategories").hide();
$('li a').mouseover(function() {
$(this).next().slideToggle('fast', function() { // <== could use slideDown
}).mouseout(function() {
$(".subcategories").slideUp();
});
});
You use a:first
$('li a:first').hover(function() {
$(this).next().slideToggle('fast', function() {
});
});
$('li').hover(function(){
$(this).children('.subcategories').slideToggle('fast', function(){});
});
Try this, you need to put the hover action on li, or when you mouse over the div it will hide, because you are now on the div, not on the anymore.
With children() you select the action for the nodes that are class "subcategories" under that li, but you are still on li, so it won't hide