我的新网站上有一个侧边栏,可以切换打开和关闭的部分,并且可以执行此操作。
但是在任何浏览器中,只有当JS脚本存在时,我才能再实际点击内部链接。
此外,控制台中没有错误。
请你能帮助我,我没有想法:)
这是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();
这是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>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</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>
谢谢你的时间,我会发布一个真实的链接,但似乎没有在这里赞扬...
答案 0 :(得分:1)
在您的循环中,您在每个链接的e.preventDefault()
事件中设置click
,阻止点击执行任何操作:
var btn = $(this).children("a").first();
...
btn.click(function(e) {
e.preventDefault();
...
}
您在a
列表中的每个.nav-left
元素上调用此内容。我真的不知道你想要的结果是什么,但是如果你删除了链接现在将正常运行,但页面会改变,你的click
功能对新页面没有任何影响。< / p>
修改:来自评论:
您是否可以对其进行调整,以便在点击内部没有
<a>
的父<ul>
时,该链接有效,而当父<a>
时确实有<ul>
,e.preventDefault();
在父<a>
上强制执行?
是的,只需在click
函数周围添加一项检查,看看a
元素旁边是否有ul
元素:
if (btn.next('ul').length) {
btn.click(function(e) {
...
}
}