sb admin 2 Menü nicht kollabiert, wenn ich einige Inhalte bearbeiten

arbeite ich einige Inhalte für dieses Bootstrap Thema zu bearbeiten: http://startbootstrap.com/template-overviews/sb-admin-2/sb admin 2 Menü nicht kollabiert, wenn ich einige Inhalte bearbeiten

, wenn ich die Navigationsleiste links einige Inhalte aus der Datei index.html löschen Menü wurde erweitert und ist nicht wieder zusammengebrochen.

hier ist die bearbeitete index.html Code:

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

Quelle

2014-09-16 WhiteOne

Ihr Markup korrekt ist und immer noch funktioniert. (http://jsfiddle.net/skjbc2u8/) Sind Sie sicher, dass jede Datei wirklich verfügbar ist? Verwenden Sie Ihre Browser-Tools, um nach 404-Fehlern oder anderen js-Fehlern zu suchen. – Sebsemillia

Ich habe noch nichts geändert, außer der Datei index.html, warum dieses Problem auftritt. Bild von meinem Browser: http://im69.gulfup.com/eajprp.png – WhiteOne

Das hilft nicht. Ich habe den HTML-Code verwendet, den Sie hier in der Geige gepostet haben, und wie Sie sehen können, funktioniert es, also muss es ein Problem mit den js-Dateien geben. Haben Sie Fehler in der Konsole? – Sebsemillia

Sie haben <script src="js/plugins/morris/morris-data.js"></script> von der Unterseite Ihres index.html zu entfernen.

Diese Datei enthält Beispieldaten aus der Demo-Vorschau. Da Sie diese Graphen div Container entfernt haben, löst das Skript einen Fehler aus, da es den Container nicht finden kann. Dieser Fehler stoppt die Skriptausführung und daher funktioniert das Metis-Menü-Skript nicht mehr.

Quelle

2014-09-16 18:53:54 Sebsemillia

vielen Dank, das hat das Problem gelöst. – WhiteOne

Aye caramba, danke! Das war extrem schwer, Debuggen ... – Muppet

Danke. Konnte das Problem nicht herausfinden – Tchaps

Ich wäre fast verrückt geworden. sb-admin-2.js

Ende der Datei Überprüfen Sie die Datei:

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');

kommentierte nur, dass ein Teil des Codes /* */

Quelle

2016-03-07 13:52:13 user1968416

Können Sie bitte Ihre Antwort klären? Was meinst du damit, diesen Teil des Codes auskommentiert zu haben? – Dave

sb admin 2 Menü nicht kollabiert, wenn ich einige Inhalte bearbeiten

Antwort

Verwandte Themen