divでページを読み込んだ後にNavbarが折りたたまれない

折り畳みボタンを見て、折り畳みしようとするとそこに表示されるオプションの1つをクリックするとナビバーに問題があります。私はページをリフレッシュしない限り、スタックして正常にならないでしょう。divでページを読み込んだ後にNavbarが折りたたまれない

これはこれは、ナビゲーションバーエリアがクリックされたら、ページをロードするJavaScript（mainpage.js）

$(document).ready(function() 
{ 
var trigger = $('#navbar-1 ul li'), container = $('#content'); 

trigger.on('click', function(){ 

    var $this = $(this), target = $this.data('target'); 

    container.load(target + '.php'); 

    trigger.removeClass("active"); 
    $this.addClass("active"); 

    return false; 

    }); 
});

EDITあるページと連動したHTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Main Page</title> 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <link rel="stylesheet" href="../css/bootstrap.css"> 
    <link rel="stylesheet" href="../css/Style.css"> 

</head> 
<body> 
    <div class=""> 
     <header> 
      <nav class="navbar navbar-inverse" id="nav"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1"> 
          <span class="sr-only">Menu</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a href="" class="navbar-brand">Ans Dashboard</a> 
        </div> 
        <div class="collapse navbar-collapse text-center" id="navbar-1"> 
         <ul class="nav navbar-nav"> 
          <li class="" data-target="customer_main"><a href=""><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></a></li> 
          <li class="" data-target="inventorypage"><a href=""><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></a></li> 
          <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></a></li> 
          <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></a></li> 
         </ul> 
         <div class="navbar-right text-center"> 
          <ul class="nav navbar-nav"> 
           <form method="post" class="nav navbar-nav"> 
            <li><p class="navbar-text"><?php echo "Welcome"?><p></li> 
            <li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?> 
            <?php 
             include("logout.php"); 
            ?> 
            </button></li> 
           </form> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </nav> 
     </header> 
    </div> 
    <!-- end of navbar--> 
    <div id="content"> 
     <!-- Js page loads here --> 
    </div> 

    <script src="../js/jquery-3.1.1.min.js"></script> 
    <script src="../js/mainpage.js"></script> 
    <script src="../js/bootstrap.min.js"></script> 
    </body> 
</html>

です：すでに解決問題は、ページが読み込まれているときに、構造化された方法にいくつかの問題があった。

出典

2016-12-23 MarcellHS93

このクリックイベントを手動で呼び出す必要はありません。手動でブートストラップが処理します。 – aavrug

問題は、クリック機能を追加する前に正常に機能していましたが、リロードせずにページをロードしていないことです。私はURLを変更せずにnavbarの後divを変更しようとしていますが、jsを追加した後は正確には実行されますが、今度はnavbarを崩壊させません – MarcellHS93

私はあなたのコードを更新した、以下の追加私のバイオリンのリンクをチェックしてください

$(document).ready(function() { 
    var trigger = $('#navbar-1 ul li'), 
    container = $('#content'); 
    trigger.on('click', function() { 
    var $this = $(this), 
     target = $this.data('target'); 
    container.load(target + '.php'); 
    trigger.removeClass("active"); 
    $this.addClass("active"); 
    return false; 
    }); 
});

fiddle

感謝。

出典

2016-12-23 05:04:22 Bhavanaditya

それは私に似ています。これは、jsファイルを介してnavbarの後でdivにページをロードする前の動作です。 – MarcellHS93

divでページを読み込んだ後にNavbarが折り​​たたまれない

答えて

関連する問題

divでページを読み込んだ後にNavbarが折りたたまれない