HTML CODE：

Question

我使用的是最新版本的bootstrap，我有一个带有固定顶部导航栏的顶级菜单页。

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

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

HTML CODE：

<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的RENDERED 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>

Answer 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>

Bootstrap下拉链接无法正常工作

HTML CODE：

JS

PHP

CSS

来自PHP的RENDERED HTML

以下是jFiddle演示的链接：

头

1 个答案:

新PHP