Q&A
「全体のソースコード」に「Bootflat」「jQuery」が入っていませんが、それではそもそも動かないのでは。
BootflatというBootstrap3のテンプレを使ってサイトを構築しているのですが、
スマホ表示した時のいわゆる「ハンバーガーアイコン」の挙動がうまくいきません。
開く時は正常に動くのですが、閉じることができません。（Chrome/Safari共にダメ）
ChromeのDeveloperToolで見てみると、開閉するdivエリアのクラスが以下のような挙動になっていました。
HTML
1<div class="collapse navbar-collapse"> 2↓開く 3<div class="navbar-collapse collapse in"> 4↓閉じる 5<div class="navbar-collapse collapsing"> ←一瞬こうなって… 6↓ 7<div class="navbar-collapse collapse in"> ←すぐにまたこうなる 8
色々なサイトで得た方法を試して見ましたが、どれもうまくいきませんでした。
詳しい方にアドバイスをいただきたいです。
以下、全体のソースコードです。
HTML
1<html lang="en"> 2<head> 3<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css"> 4<link href="/css/site.css" media="screen" rel="stylesheet" type="text/css"> 5<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css"> 6<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> 7<script type="text/javascript" src="/js/site.min.js"></script> 8<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script> 9<script type="text/javascript" src="/js/bootstrap.min.js"></script> 10</head> 11<body class="home"> 12<div class="wrap docs-header header--noBackground"> 13 <div class="contents"> 14 <nav class="navbar navbar-default navbar-custom" role="navigation"> 15 <div class="container"> 16 <div class="navbar-header"> 17 <button type="button" class="navbar-toggle" data-toggle="collapse" 18 data-target=".navbar-collapse"> 19 <span class="sr-only">Toggle navigation</span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 <span class="icon-bar"></span> 23 </button> 24 <a class="navbar-brand" href="/"><img src="/img/logo.png" height="40"></a> 25 </div> 26 <div class="collapse navbar-collapse"> 27 <ul class="nav navbar-nav navbar-right"> 28 <li><a class="nav-link" href="#">About</a></li> 29 <li><a class="nav-link" href="#">Update</a></li> 30 <li><a class="nav-link" href="#">Contact</a></li> 31 </ul> 32 </div> 33 </div> 34 </nav> 35 </div> 36</div> 37</body> 38</html>
######環境
Bootstrap v3.3.0
jQuery v1.10.1
回答2件
0
ベストアンサー
Chrome(バージョン: 59.0.3071.115)を使って以下のコードを検証したところ、ハンバーガーメニューの開閉は正常に動作しているように見えるのですが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 7 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css" rel="stylesheet"> 8 <title>タイトル</title> 9</head> 10<body> 11<div class="wrap docs-header header--noBackground"> 12 <div class="contents"> 13 <nav class="navbar navbar-default navbar-custom" role="navigation"> 14 <div class="container"> 15 <div class="navbar-header"> 16 <button type="button" class="navbar-toggle" data-toggle="collapse" 17 data-target=".navbar-collapse"> 18 <span class="sr-only">Toggle navigation</span> 19 <span class="icon-bar"></span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 </button> 23 <a class="navbar-brand" href="/"> 24 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=/img/logo.png" height="40"> 25 </a> 26 </div> 27 <div class="collapse navbar-collapse"> 28 <ul class="nav navbar-nav navbar-right"> 29 <li><a class="nav-link" href="#">About</a></li> 30 <li><a class="nav-link" href="#">Update</a></li> 31 <li><a class="nav-link" href="#">Contact</a></li> 32 </ul> 33 </div> 34 </div> 35 </nav> 36 </div> 37</div> 38<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 39<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 40</body> 41</html>
投稿2017/07/09 09:26
総合スコア14731
ありがとうございます。私の環境でも正常に動きました。
この途中にふと余計なjsファイルを読み込んでいることに気づき、コメントアウトしたら解消しました。
0
解決しました。
Bootstrapとjquery以外にsite.min.jsというものを読み込んでいたんですが、ここに余計な記述があったようで、コメントアウトしたら正常に動きました。
おさわがせしました。
投稿2017/07/09 15:28
総合スコア10
あなたの回答
tips
プレビュー
