I have a sidebar on my new website that toggles sections open and closed, and it does this.
However in any browser, only when the JS script is present, I can no longer actually click the inside links.
Also, there are no errors in the console.
Please can you help me, i'm out of ideas :)
Here is the JS,
(function($) {
"use strict";
$.fn.tree = function() {
return this.each(function() {
var btn = $(this).children("a").first();
var menu = $(this).children("ul").first();
var isActive = $(this).hasClass('active');
//initialize already active menus
if (isActive) {
menu.show();
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
}
//Slide open or close the menu on link click
btn.click(function(e) {
e.preventDefault();
if (isActive) {
//Slide up to close menu
menu.slideUp();
isActive = false;
btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
btn.parent("li").removeClass("active");
} else {
//Slide down to open menu
menu.slideDown();
isActive = true;
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
btn.parent("li").addClass("active");
}
});
/* Add margins to submenu elements to give it a tree look */
menu.find("li > a").each(function() {
var pad = parseInt($(this).css("margin-left")) + 10;
$(this).css({"margin-left": pad + "px"});
});
});
};
}(jQuery));
$('<i class="fa fa-angle-left pull-right"></i>').appendTo('.nav-left > li > a');
/* Sidebar tree view */
$(".sidebar .nav-left li").tree();
And this is the HTML:
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="/img/avatar3.png" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello, <span class="insert_usrdata_name"></span></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<ul class="nav-left">
<li>
<a title="Go to dashboard" class="icon-0" href="/index">Home</a>
</li>
<li>
<a title="Files" class="icon-1" href="/files">Files</a>
<ul>
<li>
<a title="File Manager" class="visibility-on" href="/files/file-manager">File Manager</a>
</li>
<li>
<a title="File Manager 2" class="visibility-on" href="/files/manager-2" target="_blank">File Manager 2</a>
</li>
<li>
<a title="Backups" class="visibility-on" href="/files/backups">Backups</a>
</li>
<li>
<a title="Error Logs" class="visibility-on" href="/files/error-logs">Error Logs</a>
</li>
<li>
<a title="FTP Details" class="visibility-on" href="/files/ftp-access">FTP Details</a>
</li>
<li>
<a title="FTP Accounts" class="visibility-on" href="/files/ftp-accounts">FTP Accounts</a>
</li>
<li>
<a title="FTP Login History" class="visibility-on" href="/files/ftp-login-history">FTP Login History</a>
</li>
</ul>
</li>
<li class="active">
<a title="Accounts" class="icon-2" href="/accounts">Accounts</a>
<ul>
<li>
<a title="Getting Started" class="visibility-on" href="/accounts/start">Getting Started</a>
</li>
<li class="active">
<a title="Account Details" class="visibility-on" href="/accounts/details">Account Details</a>
</li>
<li>
<a title="Change Password" class="visibility-on" href="/accounts/change-password">Change Password</a>
</li>
<li>
<a title="Change Language" class="visibility-on" href="/accounts/change-language">Change Language</a>
</li>
<li>
<a title="Change Theme" class="visibility-on" href="/accounts/change-theme">Change Theme</a>
</li>
</ul>
</li>
<li>
<a title="Emails" class="icon-3" href="/emails">Emails</a>
<ul>
<li>
<a title="Webmail" class="visibility-on" href="/emails/webmail">Webmail</a>
</li>
<li>
<a title="Email Accounts" class="visibility-on" href="/emails/manage">Email Accounts</a>
</li>
<li>
<a title="Forwarders" class="visibility-on" href="/emails/forwarders">Forwarders</a>
</li>
<li>
<a title="Sent Mail Logs" class="visibility-on" href="/emails/sent-mail-logs">Sent Mail Logs</a>
</li>
<li>
<a title="Mail Service Control" class="visibility-on" href="/emails/mail-service-control">Mail Service Control</a>
</li>
<li>
<a title="Edit MX Record" class="visibility-on" href="/emails/mx">Edit MX Record</a>
</li>
</ul>
</li>
<li>
<a title="Domains" class="icon-4" href="/domains">Domains</a>
<ul>
<li>
<a title="Subdomains" class="visibility-on" href="/domains/subdomains">Subdomains</a>
</li>
<li>
<a title="Parked Domains" class="visibility-on" href="/domains/parked">Parked Domains</a>
</li>
<li>
<a title="New Domain" class="visibility-on" href="/domains/addon">New Domain</a>
</li>
<li>
<a title="Redirects" class="visibility-on" href="/domains/redirects">Redirects</a>
</li>
</ul>
</li>
<li>
<a title="Website" class="icon-5" href="/website">Website</a>
<ul>
<li>
<a title="Statistics" class="visibility-on" href="/website/stats">Statistics</a>
</li>
<li>
<a title="Latest Visitors" class="visibility-on" href="/website/latest-visitor-report">Latest Visitors</a>
</li>
<li>
<a title="Error Pages" class="visibility-on" href="/website/error-pages">Error Pages</a>
</li>
<li>
<a title="Analyze Website" class="visibility-on" href="http://hosting.1pagerank.com/msdhosting.co.uk" target="_blank">Analyze Website</a>
</li>
<li>
<a title="Import Website" class="visibility-on" href="/website/import">Import Website</a>
</li>
<li>
<a title="Import Database" class="visibility-on" href="/website/database-import">Import Database</a>
</li>
<li>
<a title="Website Templates" class="visibility-on" href="/website/website-templates">Website Templates</a>
</li>
<li>
<a title="Script Installer" class="visibility-on" href="/website/auto-installer">Script Installer</a>
</li>
<li>
<a title="Website Builder" class="visibility-on" href="/website/builder" target="_blank">Website Builder</a>
</li>
<li>
<a title="Zyro Builder" class="visibility-on" href="/website/zyro-builder" target="_blank">Zyro Builder</a>
</li>
</ul>
</li>
<li>
<a title="Advanced" class="icon-6" href="/advanced">Advanced</a>
<ul>
<li>
<a title="DNS Zone Editor" class="visibility-on" href="/advanced/dns-zone-editor">DNS Zone Editor</a>
</li>
<li>
<a title="PHP Configuration" class="visibility-on" href="/advanced/phpinfo">PHP Configuration</a>
</li>
<li>
<a title="PHP Version" class="visibility-on" href="/advanced/php-configuration">PHP Version</a>
</li>
<li>
<a title="SSH Console" class="visibility-on" href="/advanced/ssh-console">SSH Console</a>
</li>
<li>
<a title="MySQL Databases" class="visibility-on" href="/advanced/mysql-databases">MySQL Databases</a>
</li>
<li>
<a title="phpMyAdmin" class="visibility-on" href="/advanced/phpmyadmin">phpMyAdmin</a>
</li>
<li>
<a title="Cron Jobs" class="visibility-on" href="/advanced/cronjobs">Cron Jobs</a>
</li>
<li>
<a title="Cron Output" class="visibility-on" href="/advanced/cron-output">Cron Output</a>
</li>
</ul>
</li>
<li>
<a title="Other" class="icon-7" href="/other">Other</a>
<ul>
<li>
<a title="Password Protect Directories" class="visibility-on" href="/other/password-protect-dirs">Password Protect Directories</a>
</li>
<li>
<a title="IP Deny Manager" class="visibility-on" href="/other/ip-deny">IP Deny Manager</a>
</li>
<li>
<a title="Hotlink Protection" class="visibility-on" href="/other/hotlink-protection">Hotlink Protection</a>
</li>
<li>
<a title="Folder Index Manager" class="visibility-on" href="/other/folder-index-manager">Folder Index Manager</a>
</li>
<li>
<a title="Fix File Ownership" class="visibility-on" href="/other/fix-file-ownership">Fix File Ownership</a>
</li>
<li>
<a title="Reset Account" class="visibility-on" href="/other/reload-account">Reset Account</a>
</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
Thanks for you're time, I would post a link to the real thing, but it seems that is not praised on here...
Within your loop you're setting e.preventDefault() on each link's click event, preventing the click from doing anything:
var btn = $(this).children("a").first();
...
btn.click(function(e) {
e.preventDefault();
...
}
You're calling this on every single a element within your .nav-left list. I don't really know what your desired result is, but if you remove that the links will now function as normal, but the page will change and your click function will have no effect on the new page.
Edit: From comments:
Would you be able to adapt it so that when a parent <a> that doesn't have a <ul> inside is clicked, the link works, and when the parent <a> does have a <ul>, the e.preventDefault(); is enforced on the parent <a>?
Yes, simply add a check around the click function to see whether the a element has a ul element next to it:
if (btn.next('ul').length) {
btn.click(function(e) {
...
}
}
Related
When I select an option of the menu it is displayed as it should be but when I select another option the other option is also displayed, the idea is that only one is displayed at the same time.
`
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
`
this is the code that I have in jquery and I need a change so that it only allows me to display one option instead of two.
`
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>
This is the html code, please help me :c
`
This is the html code, please help me :c
$(".sub-menu ul").hide()
$(".sub-menu a").click(function () {
$(".sub-menu ul").not($(this)).hide();
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>
Menu - Snippet
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JQuery - Snippet
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
if ($(e.target).closest($('.Menu')).length) {
if ($(e.target).closest("a").siblings("ul").length === 0) {
console.log('Doesn\'t have Children');
} else {
$(e.target).closest("a").siblings("ul").show();
}
}
});
});
What I'm Trying To Achieve
Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.
If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
If the user clicks on a same level item which expands, all other same level should be hidden.
I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.
You can use find() but when you click on parent you will have to check if it is parent, so when you want to open you just want to open direct children but when you want to close you want to close all chidren.
$("ul li ul").hide()
$('li').click(function(e) {
e.stopPropagation()
var parent = $(this)
$(this).find('ul').each(function() {
if ($(this).is(':visible')) {
$(this).hide()
} else {
if ($(this).parent().is(parent)) {
$(this).show()
}
}
})
$(this).siblings().children('ul').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements
Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>
I need to add class="active" to tag <li> when i click on <a> to become <li class="active">
Notice i have multiple <li> tags and i need to class="active" only for tag <li> that i clicked on it.
this my sample code :
<ul class="nav">
<li>
<a href="...">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="...">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>
Use .parent() and .addClass()
$(function(){
$('a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active');
})
})
.active {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="#">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>
I have a problem on menu of website,this menu have more section and in desktop version is suddivise in two part , the first is normal menu the second use jquery superfish for drop-down menu in desktop.
In mobile use only slicknav, http://slicknav.com/
every work fine , but have a problem , if example open the menu in desktop and after try to resize the screen of desktop the superfish not switch with slicknav, only if reload the page work and load correct class.
The same in viceversa:
If open menu in slow screen and after try to open not switch to superfish
in practice should change class to a same <div class=""> to use in desktop superfish and slicknav in Mobile
ii have used this script but not work
<script>
function resize() {
if ( $(window).width() < 739) {
$("#nullo").toggleClass('sf-menu cambioclasse2');
}
else {
$("#nullo").toggleClass('sf-menu sf-menu');
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
The class="cambioclasse2 " in a class i have used for annulled the class of superfish "sf-menu"
Menu in desktop:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>
menu in mobile:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>