引导下拉链接不起作用

Posted 2023-02-24

【中文标题】引导下拉链接不起作用

【英文标题】：Bootstrap dropdown links not working

【发布时间】：2015-06-27 16:57:46

【问题描述】：

我正在使用最新版本的引导程序，并且我有一个带有固定顶部导航栏的顶部菜单页面。

它有几个链接和一个搜索表单。搜索通过 AJAX 提交查询，然后以下拉结果输出 php 文件的结果。

我能够发布结果并让下拉菜单正常工作，但链接不可点击。它们被突出显示，我可以在状态栏中看到下面的 href，但我无法点击。

html 代码：

<div class="row">
<img class="img-responsive center-block" src="images/header.jpg">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-rc">
    <div class="container-fluid">
        <div class="highlight-light navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#"><span class="glyphicon glyphicon-home">&nbsp;</span>Main Menu</a>
        </div>
        <div id="top-navbar" class="collapse navbar-collapse">
            <ul class="highlight-light nav navbar-nav">
                <li><a href="newcontact.php"><span class="glyphicon glyphicon-user">&nbsp;</span>New Contact</a></li>
                <li><a href="newsearch.php"><span class="glyphicon glyphicon-search">&nbsp;</span>Search</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-list-alt">&nbsp;</span>Attendance</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-calendar">&nbsp;</span>Planner</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-stats">&nbsp;</span>Statistics</a></li>
                <li class="dropdown">
                    <form class="navbar-form navbar-left" id="QuickSearch" role="form" method="post" action="">
                        <div class="form-group form-group-xs">
                            <input type="text" class="input" placeholder="Search by Name or Email" name="SearchTerm" id="SearchTerm"/>
                            <div class="btn-group btn-group-xs">
                                <input class="btn btn-default" type="submit" value="Search" />
                            </div>
                        </div>
                    </form>
                    <div id="QuickSearchResults"></div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="newlogout.php"><span class="glyphicon glyphicon-log-out">&nbsp;</span>Log-out</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</div>

JS

$("#QuickSearch").submit(function()

$.blockUI( message: '<h1><img src="img/busy.gif" />&nbsp;Please Wait...</h1>' ); 
// Intercept the form submission
var formdata = $(this).serialize(); // Serialize all form data

// Post data to your PHP processing script
$.post( "quicksearch.php", formdata, function( data ) 
    // Act upon the data returned, setting it to #success <div>
    $("#QuickSearchResults").html ( data );
    $(function () 
        $('#QuickResultsMenu').dropdown('toggle');
    );
    $.unblockUI();
);

return false; // Prevent the form from actually submitting
);

PHP

/* Code that does DB connection and processing, then below */
<ul id="QuickResultsMenu" class="dropdown-menu padding10">
<?php   
//And we display the results 
foreach($ContactSearch as $Results) : ?>

<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=<?php echo $Results['Id'];?>"><?php echo $Results['FirstName'];?>
        <?php echo $Results['LastName'];?>,<?php echo $Results['Phone2'];?>,<?php echo $Results['Email'];?></a>
    </li>

<?php endforeach; ?>

<!-- Total Search Results -->
    <li class="">
        <form role="form" id="QuickResults" name="QuickResults">
        Show more results
        </form>
    </li>
</ul>

我注意到如果我删除 php 代码中的 ul 标记，链接可以正常工作，但样式会变得混乱。我不知道如何使它看起来正确并具有功能性。任何帮助是极大的赞赏。谢谢！

CSS

@charset "utf-8";
/* CSS Document */

/* START
** Div and container setup */

/* Set a max-width for horizontal fluid layout and make it centered */
.container-fluid 
    margin-right: auto;
    margin-left: auto;
    max-width: 970px;


/* Padding */
.padding10 
    padding:10px;


/* Shadow for Page Outline */
.rcshadow 
    -moz-box-shadow: 0px 0px 30px 10px #000;
    -webkit-box-shadow: 0px 0px 30px 10px #000;
    -khtml-box-shadow: 0px 0px 30px 10px #000;
    box-shadow: 0px 0px 30px 10px #000;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;


/* Page Outline */
.rcpage 
    background-color:#FFF;
    padding:10px 30px 20px;
    margin-left:auto;
    margin-right:auto;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;


/* Body */
body 
    margin:0;
    padding:0;
    font-size:100%;
    font-family:verdana,arial,'sans serif';
    background-color:#3b607e;
    color:#000000;


/* END
** Div and container setup */


/* START 
** Navbar Styling */
.navbar-rc 
    margin-bottom:0px;
    -moz-border-radius:0px;
    border-radius:0px;


.navbar-nav > li > a, .navbar-brand 
    padding-top:5px !important; 
    padding-bottom:0 !important; 
    height: 30px; 
 

.highlight-light > li:hover, .highlight-light .navbar-brand:hover 
    background-color:#e7e7e7;   



.highlight-dark > li:hover 
    background-color:#000000;   


.navbar 
    min-height:30px !important;

/* END 
** Navbar Styling */


/* START 
** Typography */
h1 
    font-size:2em;
    color:#739CBF;
    font-weight:bold;
    text-shadow: #000 1px 1px 2px;
    text-align:center;


h2 
    font-size:1.4em;
    color:#3b607e;
    font-weight:bold;


h3 
    font-size:1.4em;
    color:red;
    font-weight:bold;


h4 
    font-size:1.4em;
    color:#000;
    font-weight:bold;


/* Used for search text */
.smalltext 
    font-size:xx-small;
    color:#ABABAB;


.error 
    color:red;
    font-weight:bold;


/* text for footer that goes against background */
.bgtext 
    color: silver;


/* Form Error Code */
input.error 
    background: red;
    color: white;


/* Form Error Code */
label.error 
    color: red;

/* END 
** Typography */

/* START
** Buttons */
.rcbutton 
    -moz-box-shadow:inset 0px 1px 0px 0px #739CBF;
    -webkit-box-shadow:inset 0px 1px 0px 0px #739CBF;
    box-shadow:inset 0px 1px 0px 0px #739CBF;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #87A5BF), color-stop(1, #739CBF) );
    background:-moz-linear-gradient( center top, #87A5BF 5%, #739CBF 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#3B607E;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #394D5F;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;



.button 
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;


.button:hover 
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;


.button:active 
    position:relative;
    top:1px;

/* END
** Buttons */

/* END
** Miscellaneous */
.panelhead 
    width:420px;
    color:#FFF;
    font-size:1.4em;
    font-weight:bold;
    background-color:#3b607e;
    padding:5px;
    border-top:thick ridge #000;
    border-left:thick ridge #000;
    border-right:thick ridge #000;


.panelbody 
    width:420px;
    color:#000;
    font-size:1.1em;
    background-color:#FFF;
    padding:5px;
    border:thick ridge #000;


.fullpanelhead 
    margin-left:auto;
    margin-right:auto;
    width:890px;
    color:#FFF;
    font-size:1.4em;
    font-weight:bold;
    background-color:#3b607e;
    padding:5px;
    border-top:thick ridge #000;
    border-left:thick ridge #000;
    border-right:thick ridge #000;


.fullpanelbody 
    margin-left:auto;
    margin-right:auto;
    width:890px;
    color:#000;
    font-size:1.1em;
    background-color:#FFF;
    padding:5px;
    border:thick ridge #000;
    margin-bottom:20px;

 .fullpanelsection

    margin-left:auto;
    margin-right:auto;
    width:890px;
    position:relative;


.fieldcolumn 
    float:left;
    width:180px;
    display:inline;


img.pic 
    border:solid thin #000000;


img.profilepic 
    border:solid thin #000000;
    display:block;
    margin-left:auto;
    margin-right:auto;


.mousehand 
    cursor:pointer;

/* END
** Miscellaneous */

/* START
** PICTURE TAKER */
#videocontainer 
    margin: 0px auto;
    width: 500px;
    height: 375px;

#videoElement 
    width: 500px;
    height: 375px;
    background-color: #666;

#canvas 
    width: 500px;
    height: 375px;
    margin: 0px auto;
    background-color: #CCC;

/*
** END PICTURE TAKER */

从 PHP 渲染的 HTML

<div class="open" id="QuickSearchResults"><ul aria-expanded="true" id="QuickResultsMenu" class="dropdown-menu padding10">

<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=2352">Dave      </a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=1850">Dave      Fenstermaker</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=3268">Dave      Hughes</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=24870">Dave     Tello</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=18998">Dave     Thigpen</a>
    </li>


<!-- Total Search Results -->
    <li class="">
        <form role="form" id="QuickResults" name="QuickResults">
        Show more results
        </form>
    </li>
</ul>
</div>

这是一个 jFiddle 演示的链接：

https://jsfiddle.net/v2p04nsa/

奇怪的是，这行得通。我使用下面渲染的 HTML 代替 php。

头

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Roll Call For Infusionsoft</title>
    <link rel="icon" type="image/ico" href="https://avellanenterprises.com/favicon.ico">
    <link rel="stylesheet" href="<?php echo "css/bootstrap.min.css" ?>">
    <link rel="stylesheet" href="<?php echo "css/bootstrap-datepicker.css" ?>">
    <link rel="stylesheet" type="text/css" href="css/bsmaster.css">
    <script src="<?php echo "js/jquery.min.js" ?>"></script>
    <script src="<?php echo "js/jquery.validate.js" ?>"></script>
    <script src="<?php echo "js/additional-methods.js" ?>"></script>    
    <script src="<?php echo "js/bootstrap.min.js" ?>"></script>
    <script src="<?php echo "js/jquery.blockUI.js" ?>"></script>
</head>

【问题讨论】：

你能发布你的css吗？您是否编辑过样式？更具体地说，是在 PHP 中找到的 UL 标记中的 CSS 类。我猜这就是问题所在或未捕获的 javascript 错误。当您单击 href 时，您的 Chrome 开发工具控制台会显示什么？希望这会有所帮助。

还有一些进一步的阅读。 ***.com/questions/9529574/…

那个html是渲染的html吗？如果没有，请发布呈现的 html。

您是否确保加载了正确的 javascript 文件？

@redoc - 我已经发布了上面的 CSS。我正在使用股票 BS 和我在上面发布的 CSS 文件。我不相信有任何冲突。

【参考方案1】：

我使用了不同的方法，并且已经使链接正常工作。我不得不使用表格来输出数据，然后一切正常。我不确定为什么它在 JSfiddle 上有效，但在实时页面上无效。无论哪种方式，表格都运行良好，因此输出搜索结果不再有问题。

新的 PHP

<table class="table table-hover table-condensed">
<thead><tr><th>Full Name</th><th>Mobile Phone</th><th>Email Address</th></tr></thead><tbody>
<?php   

    //And we display the results 
    foreach($ContactSearch as $Results) : ?>
    
    <!-- Search Results -->
    <tr class="clickable-row" onclick="document.location = 'contact.php?Id=<?php echo $Results['Id'];?>';">
    <td><span class="glyphicon glyphicon-user">&nbsp;</span><?php echo $Results['FirstName'];?> <?php echo $Results['LastName'];?></td>
    <td><span class="glyphicon glyphicon-earphone">&nbsp;</span><?php echo $Results['Phone2'];?></td>
    <td><span class="glyphicon glyphicon-envelope">&nbsp;</span><?php echo $Results['Email'];?></td></tr>       
    <?php endforeach; ?>
    </tbody></table>