Bootstrap折叠菜单不会在页面加载中折叠

时间:2016-10-02 11:56:48

标签: javascript jquery html css twitter-bootstrap

我使用了两种不同的桌面和移动菜单。当我进入移动视图时,折叠菜单无效。我使用:

$(".navbar-collapse").collapse('hide');

在页面加载上使用它之后,首先显示然后隐藏。

以下是我的移动菜单代码:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="top-header">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header pull-left" style="margin-left:5px">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
                <a href="http://localhost/eboighar/" class="logo-mini">

                    <img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">                              
                </a>
                                    <div class="pull-right  cart-mview-top">
                                            <a id="cart_at_head2" class="pull-right">
                        <div class="total" style="margin-top:10px;">
                            <span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
                            </div>
                            <img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">

                        </a>

                        <!-- <img class="header-busket" src="asset/busket.png"/> -->

                        <div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
                            <div class="cart-sumary2-mobile" style="background:#fafafa;">
                                <h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
                                <img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
                                <div>
                                    <div class="padding-10" id="cart_item_holder2">
                                        <div class="bg-fa">
                                            <div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
                                        <div class="clear_both"></div>
                                    </div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
                                            <div id="price_and_button2" style="display: none;">
                                                <div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
                                                <div class="clear_both"></div>
                                                                                                           <div class="crt_btn_con "> 
                                                </div>


                                            </div>
                                        </div>
                         </div>
                    </div>
                </div><!-- End of Cart Summery. --> 
            </div>
            <div class="clearfix"> </div> 
        </div>
    </div>
    <div stylle="clear:both; margin:0 5px;">
        <form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
            <div class="form-group menu-top-search">
                <div class="input-group" style="padding:0 6px;">

                    <input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
                    <div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
                        <!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
                        <div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
                            &nbsp;
                        </div>
                    </div>
                    <div class="input-group-btn">
                        <a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
                    </div>
                </div>
            </div>
        </form>
    </div>  
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
       <div style="clear:both"></div>
         <a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>

        <div style="clear:both"></div>
        <ul class="nav navbar-nav ">
            <li class="active">
                <a href="http://localhost/eboighar/" style="border-top:1px dashed #ccc;"><i class="glyphicon glyphicon-home ico-danger"></i>  Home </a>
            </li>
            <li>
                <a href="http://localhost/eboighar/index.php/index/aboutus/1"><i class="glyphicon glyphicon-user ico-success"></i>  About eBoighar</a>
            </li>
                                    <li><a href="http://localhost/eboighar/index.php/index/howtobuy/"><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</a></li>
            <li><a href="http://localhost/eboighar/index.php/index/unlisted_book_order"><i class="   glyphicon glyphicon-tasks ico-warning"></i>  Order unlisted books</a></li>
            <!-- <li><a href="http://localhost/eboighar/index.php/index/tutorial_public/"><i class="glyphicon glyphicon-file ico-info"></i>  Tutorials</a></li> -->
            <li><a href="http://localhost/eboighar/index.php/index/bulk_order/"><i class="glyphicon glyphicon-gift ico-danger"></i>  Bulk order</a></li>
            <li><a href="http://localhost/eboighar/index.php/index/medical_equipment/"><i class="glyphicon glyphicon-briefcase ico-success"></i>  Medical equipment</a></li>
            <li><a href="http://localhost/eboighar/index.php/index/printingNbinding"><i class="glyphicon glyphicon-print ico-info"></i>  Printing &amp; Binding </a></li>
            <li>
                <a href="http://localhost/eboighar/index.php/index/NewsAll/"><i class="glyphicon glyphicon-globe ico-warning"></i>  News </a>
            </li>
            <li>
                <a href="http://localhost/eboighar/index.php/index/contact/1"><i class="glyphicon glyphicon-earphone ico-info"></i>  Contact Us </a>
            </li>

        </ul>
        <div style="clear:both"></div>
        <p class="log pull-right" style="margin-bottom:10px;">
                                    <a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
            <a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
                                                                                </p>
    </div><!-- /.navbar-collapse -->
</nav>

你可以在这里看到问题:http://eboighar.com/ 有人帮助解决这个问题......

0 个答案:

没有答案