2014-09-16 20 views
10

tôi đang làm việc để chỉnh sửa một số nội dung cho chủ đề bootstrap này: http://startbootstrap.com/template-overviews/sb-admin-2/sb admin cách đây 2 đơn không sụp đổ khi tôi chỉnh sửa một số nội dung

khi tôi xóa một số nội dung từ file index.html thanh điều hướng bên trái menu đã được mở rộng và không sụp đổ nữa.

đây là mã index.html chỉnh sửa:

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>SB Admin 2 - Bootstrap Admin Theme</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- MetisMenu CSS --> 
    <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet"> 

    <!-- Timeline CSS --> 
    <link href="css/plugins/timeline.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/sb-admin-2.css" rel="stylesheet"> 

    <!-- Morris Charts CSS --> 
    <link href="css/plugins/morris.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div id="wrapper"> 

     <!-- Navigation --> 
     <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> 
      <div class="navbar-header"> 
       <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> 
       <a class="navbar-brand" href="index.html">SB Admin v2.0</a> 
      </div> 
      <!-- /.navbar-header --> 

      <ul class="nav navbar-top-links navbar-right">       
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-alerts"> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-comment fa-fw"></i> New Comment 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-twitter fa-fw"></i> 3 New Followers 
            <span class="pull-right text-muted small">12 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-envelope fa-fw"></i> Message Sent 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-tasks fa-fw"></i> New Task 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-upload fa-fw"></i> Server Rebooted 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>See All Alerts</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- /.dropdown-alerts --> 
       </li> 
       <!-- /.dropdown --> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-user"> 
         <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a> 
         </li> 
         <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a> 
         </li> 
         <li class="divider"></li> 
         <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a> 
         </li> 
        </ul> 
        <!-- /.dropdown-user --> 
       </li> 
       <!-- /.dropdown --> 
      </ul> 
      <!-- /.navbar-top-links --> 

      <div class="navbar-default sidebar" role="navigation"> 
       <div class="sidebar-nav navbar-collapse"> 
        <ul class="nav" id="side-menu"> 
         <li class="sidebar-search"> 
          <div class="input-group custom-search-form"> 
           <input type="text" class="form-control" placeholder="Search..."> 
           <span class="input-group-btn"> 
           <button class="btn btn-default" type="button"> 
            <i class="fa fa-search"></i> 
           </button> 
          </span> 
          </div> 
          <!-- /input-group --> 
         </li> 
         <li> 
          <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a href="#">Flot Charts</a> 
           </li> 
           <li> 
            <a href="#">Morris.js Charts</a> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-table fa-fw"></i> Tables</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-edit fa-fw"></i> Forms</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a href="#">Panels and Wells</a> 
           </li> 
           <li> 
            <a href="#">Buttons</a> 
           </li> 
           <li> 
            <a href="#">Notifications</a> 
           </li> 
           <li> 
            <a href="#">Typography</a> 
           </li> 
           <li> 
            <a href="#">Grid</a> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 

         </ul> 
       </div> 
       <!-- /.sidebar-collapse --> 
      </div> 
      <!-- /.navbar-static-side --> 
     </nav> 

     <div id="page-wrapper"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1 class="page-header">Dashboard</h1> 
       </div> 
       <!-- /.col-lg-12 --> 
      </div> 
      <!-- /.row --> 
      <div class="row"> 
       <div class="col-lg-3 col-md-6"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-3"> 
            <i class="fa fa-comments fa-5x"></i> 
           </div> 
           <div class="col-xs-9 text-right"> 
            <div class="huge">26</div> 
            <div>New Comments!</div> 
           </div> 
          </div> 
         </div> 
         <a href="#"> 
          <div class="panel-footer"> 
           <span class="pull-left">View Details</span> 
           <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
           <div class="clearfix"></div> 
          </div> 
         </a> 
        </div> 
       </div> 
       <div class="col-lg-3 col-md-6"> 
        <div class="panel panel-green"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-3"> 
            <i class="fa fa-tasks fa-5x"></i> 
           </div> 
           <div class="col-xs-9 text-right"> 
            <div class="huge">12</div> 
            <div>New Tasks!</div> 
           </div> 
          </div> 
         </div> 
         <a href="#"> 
          <div class="panel-footer"> 
           <span class="pull-left">View Details</span> 
           <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
           <div class="clearfix"></div> 
          </div> 
         </a> 
        </div> 
       </div> 
       <div class="col-lg-3 col-md-6"> 
        <div class="panel panel-yellow"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-3"> 
            <i class="fa fa-shopping-cart fa-5x"></i> 
           </div> 
           <div class="col-xs-9 text-right"> 
            <div class="huge">124</div> 
            <div>New Orders!</div> 
           </div> 
          </div> 
         </div> 
         <a href="#"> 
          <div class="panel-footer"> 
           <span class="pull-left">View Details</span> 
           <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
           <div class="clearfix"></div> 
          </div> 
         </a> 
        </div> 
       </div> 
       <div class="col-lg-3 col-md-6"> 
        <div class="panel panel-red"> 
         <div class="panel-heading"> 
          <div class="row"> 
           <div class="col-xs-3"> 
            <i class="fa fa-support fa-5x"></i> 
           </div> 
           <div class="col-xs-9 text-right"> 
            <div class="huge">13</div> 
            <div>Support Tickets!</div> 
           </div> 
          </div> 
         </div> 
         <a href="#"> 
          <div class="panel-footer"> 
           <span class="pull-left">View Details</span> 
           <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
           <div class="clearfix"></div> 
          </div> 
         </a> 
        </div> 
       </div> 
      </div> 
      <!-- /.row --> 

      </div> 
      <!-- /.row --> 
     </div> 
     <!-- /#page-wrapper --> 

    </div> 
    <!-- /#wrapper --> 

    <!-- jQuery Version 1.11.0 --> 
    <script src="js/jquery-1.11.0.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="js/plugins/metisMenu/metisMenu.min.js"></script> 

    <!-- Morris Charts JavaScript --> 
    <script src="js/plugins/morris/raphael.min.js"></script> 
    <script src="js/plugins/morris/morris.min.js"></script> 
    <script src="js/plugins/morris/morris-data.js"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="js/sb-admin-2.js"></script> 

</body> 

</html> 
+0

đánh dấu của bạn là chính xác và vẫn hoạt động. (http://jsfiddle.net/skjbc2u8/) Bạn có chắc là mọi tập tin đều có sẵn không? Sử dụng công cụ trình duyệt của bạn để kiểm tra lỗi 404 hoặc bất kỳ lỗi js nào khác. – Sebsemillia

+0

tôi chưa thay đổi bất kỳ điều gì, ngoại trừ tệp index.html, đó là lý do khiến sự cố này xuất hiện. hình ảnh từ trình duyệt của tôi: http://im69.gulfup.com/eajprp.png – WhiteOne

+0

Điều này không hữu ích. Tôi sử dụng html bạn đăng ở đây trong fiddle và như bạn có thể nhìn thấy nó hoạt động, vì vậy nó phải là một số vấn đề với các tập tin js. Bạn có gặp bất kỳ lỗi nào trong bảng điều khiển không? – Sebsemillia

Trả lời

18

Bạn phải gỡ bỏ <script src="js/plugins/morris/morris-data.js"></script> từ tận đáy index.html của bạn.

Tệp này chứa dữ liệu mẫu từ bản xem trước bản trình diễn. Vì bạn đã loại bỏ các đồ thị này div vùng chứa, tập lệnh sẽ phát ra lỗi vì không thể tìm thấy vùng chứa. Lỗi này dừng việc thực thi tập lệnh và do đó tập lệnh menu metis không hoạt động nữa.

+0

cảm ơn rất nhiều, đã giải quyết được vấn đề. – WhiteOne

+1

Aye caramba, cảm ơn bạn! Đó là một trong những cực kỳ khó khăn để gỡ lỗi ... – Muppet

+0

Cảm ơn bạn. không thể tìm ra vấn đề – Tchaps

2

Tôi gần như phát điên. Kiểm tra các tập tin sb-admin-2.js

cuối của tập tin:

var url = window.location; 
var element = $('ul.nav a').filter(function() { 
    return this.href == url || url.href.indexOf(this.href) == 0; 
}).addClass('active').parent().parent().addClass('in').parent(); 
if (element.is('li')) { 
    element.addClass('active'); 

bình luận duy nhất mà một phần của mã /* */

+0

Bạn có thể làm rõ câu trả lời của mình không? Bạn có ý gì khi nhận xét rằng một phần của mã? – Dave

Các vấn đề liên quan