bootstrap li链接无法在服务器上运行

时间:2017-12-04 02:33:30

标签: php jquery

当TOOLS和其他下拉菜单正在工作(移动到其他页面)时,

菜单REPORT不起作用(链接)。为什么REPORT菜单在本地工作但不在ubuntu服务器上?

它们都使用相同的结构但看起来不同,因为在造型

附加:

单击li标签时,例如:BY TYPE。它将转到rep_handle.php。然后从rep_handle.php它将移动到stat_type VARIABLE到date_handler.php的另一个位置。但它只是停在stat_type.php。

它与我的CSS有冲突吗?请指教..谢谢

报告

<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Reports </a>
<ul class = "dropdown-menu">
    <li class="library">
        <a class = "dropdown-toggle" href = "#"> Library </a>
    </li>
    <li class="libraryli divider" style=""></li>
    <li class="libraryli dropdown-submenu" style="">
        <a class = "dropdown-toggle" href = "#">&emsp;&emsp;&bull; Yearly </a>
            <ul class = "dropdown-menu">
                <li><a href = "rep_handler.php?stat_type=type"> By Type</a></li>
                <li><a href = "rep_handler.php?stat_type=cluster"> By <?php echo $CS; ?></a></li>
            </ul>
    </li>
    <li class="libraryli dropdown-submenu" style="">
        <a class = "dropdown-toggle" href = "#">&emsp;&emsp;&bull; TRW </a>
            <ul class = "dropdown-menu">
                <li><a href = "rep_handler.php?stat_type=top">Top Visitors</a></li>
                <li><a href = "rep_handler.php?stat_type=section"> By Section</a></li>
                <li><a href = "rep_handler.php?stat_type=ttype">Comparison By Type</a></li>
                <li><a href = "rep_handler.php?stat_type=tcluster"> Comparison By <?php echo $CS; ?></a></li>
            </ul>
    </li>
    <li class="libraryli divider" style="display:none;"></li>
    <li><a href = "rep_handler.php?stat_type=sydays"> Service Days</a></li>
    <li><a href = "rep_handler.php?stat_type=record"> Records</a></li>
</ul>

JS

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.dropdown-toggle').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
    $('.dropdown-submenu a.dropdown-toggle').not(this).next('ul').hide();
  });
});
</script>   
<script>
$(document).ready(function(){
  $('.library').on("mouseover", function(e){
    $(this).siblings('.libraryli').show();
    e.stopPropagation();
    e.preventDefault();
    $('span.caret-pr').addClass("caret-reversed");
  });
  $('.library').on("click", function(e){
    $(this).siblings('.libraryli').toggle();
    e.stopPropagation();
    e.preventDefault();
    $('span.caret-pr').toggleClass("caret-reversed");
  });
});
</script>

CSS

    .dropdown,子菜单     {         位置:相对;     }

.dropdown-submenu>.dropdown-menu 
{
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu 
{
    display: block;
}

.dropdown-submenu>a:after 
{
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 4.5px 0 4.5px 4.5px;
    border-left-color: #000;
    margin-top: 4.5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after 
{
    border-left-color: #000;
}

.dropdown-submenu.pull-left 
{
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu 
{
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.caret-pr
{
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    margin-top: 6px;
    margin-right: -10px;
    border-top: 5px solid ;
}

.caret.caret-reversed 
{
    border-top-width: 0;
    border-bottom: 5px solid ;
}

.libraryli
{
background-color:#f5f5f5;
}

</style>       

0 个答案:

没有答案