<a> Links in a sidebar aren&#39;t clickable when Javascript is present</a>

时间:2014-05-30 08:55:14

标签: javascript jquery html

我的新网站上有一个侧边栏,可以切换打开和关闭的部分,并且可以执行此操作。

但是在任何浏览器中,只有当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>

谢谢你的时间,我会发布一个真实的链接,但似乎没有在这里赞扬...

1 个答案:

答案 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) {
        ...
    }
}