2017-05-15 11 views
0

は、私がここにjsfiddle持っている - https://jsfiddle.net/810mp54o/26/モバイルのみアコーディオンNAV

を私はこれをやって好きではありませんが、私は、実施例があるが、私はそれを行うには良い方法があると確信しています。

私は携帯電話のアコーデオンに入れたい内容の下にコンテンツを持つシンプルなヘッダーを持っています。

私はオープンクラスを追加するためにjqueryを使用していますが、これを追加する必要があります。重要なのはこれを動作させるためです。これを行うにはより良い方法です。

また、私は人々がブラウザのサイズを変更することはないと知っています。これはデスクトップまたはモバイルで見られるでしょうが、常にモバイルサイズで閉じるようにアコーディオンを表示する方法があります。

$(document).ready(function(){ 
     $('.js-btn').on('click', function(){ 
      $(this).next('.content').toggleClass('open'); 
     }) 
    }); 

答えて

0

さて、あなたは、ブートストラップ(https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
     </ul> 
     </div> 
    </nav> 

    <div class="container"> 
     <h3>Basic Navbar Example</h3> 
     <p>A navigation bar is a navigation header that is placed at the top of the page.</p> 
    </div> 

    </body> 
    </html> 
からnavibarのように気にいらを使用することができます
関連する問題