<a>存在Javascript时，无法单击侧边栏中的链接</a>
[英]<a> Links in a sidebar aren't clickable when Javascript is present
问题描述
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. 但是，在任何浏览器中，仅当存在JS脚本时，我才能再实际单击内部链接。
Also, there are no errors in the console. 另外，控制台中没有错误。
Please can you help me, i'm out of ideas :) 请你能帮我，我没主意:)
Here is the 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();
And this is the HTML: 这是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>
Thanks for you're time, I would post a link to the real thing, but it seems that is not praised on here... 谢谢您的宝贵时间，我会发布指向真实内容的链接，但似乎在这里并没有对此表示赞赏...
1 个解决方案
解决方案1
1 已采纳 2014-05-30 09:01:46
Within your loop you're setting e.preventDefault() on each link's click event, preventing the click from doing anything: 在循环中，您要在每个链接的click事件上设置e.preventDefault() ，以防止该点击执行任何操作：
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. 你的每一个上调用此a你中的元素.nav-left列表。 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. 我真的不知道您想要的结果是什么，但是如果删除该链接，链接现在将正常运行，但是页面将发生变化，并且您的click功能将对新页面没有影响。
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>, thee.preventDefault();<a>不具有一个<ul>内被点击，链接的作品，并且当父<a>确实有一个<ul>的e.preventDefault();is enforced on the parent<a>?<a>上强制执行的？
Yes, simply add a check around the click function to see whether the a element has a ul element next to it: 是的，只需添加一个检查周围的click功能，看是否a元素具有ul旁边元素：
if (btn.next('ul').length) {
btn.click(function(e) {
...
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我使用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?
引导上不可点击的侧边栏链接 - Un-clickable sidebar links on bootstrap
链接没有产生 - Links aren't generating
可点击的链接更改JavaScript - clickable links to change javascript
使链接在 Javascript 中可点击？ - Making links clickable in Javascript?
javascript-使链接可点击 - javascript - make links clickable
存在或不存在路由参数时启用或禁用链接 - Enable or disable links when a route parameter is present or isn't present
链接未被阻止时不可点击 - Links not clickable when not block
我在WebStorm JavaScript调试控制台中看不到可点击的链接 - I don't see clickable links in WebStorm JavaScript debug console
相关标签