[英]<a> Links in a sidebar aren't clickable when Javascript is present
我在新网站上有一个侧边栏，它可以切换打开和关闭的部分，并且可以做到这一点。
但是，在任何浏览器中，仅当存在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>
谢谢您的宝贵时间，我会发布指向真实内容的链接，但似乎在这里并没有对此表示赞赏...
在循环中，您要在每个链接的click事件上设置e.preventDefault() ，以防止该点击执行任何操作：
var btn = $(this).children("a").first();
...
btn.click(function(e) {
e.preventDefault();
...
}
你的每一个上调用此a你中的元素.nav-left列表。 我真的不知道您想要的结果是什么，但是如果删除该链接，链接现在将正常运行，但是页面将发生变化，并且您的click功能将对新页面没有影响。
编辑：从评论：
你能够适应它，这样当父
<a>不具有一个<ul>内被点击，链接的作品，并且当父<a>确实有一个<ul>的e.preventDefault();是在父<a>上强制执行的？
是的，只需添加一个检查周围的click功能，看是否a元素具有ul旁边元素：
if (btn.next('ul').length) {
btn.click(function(e) {
...
}
}
为什么我使用Javascript添加到DOM的链接不是可点击的？
[英]Why aren't the links I'm adding to the DOM with Javascript clickable?
有人能告诉我为什么当我的链接下面有一个 div 时我的链接不可点击吗？
[英]Can someone tell me why my links aren't clickable when I have a div under it?
我在WebStorm JavaScript调试控制台中看不到可点击的链接
[英]I don't see clickable links in WebStorm JavaScript debug console
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.