サイドバーがブートストラップとJqueryで非表示になりますか？私は私を助けてください</p> <p>...サイドバーの隠蔽を作成したいとブートストラップを使用して示したが、私のコードは動作しない

Question

ガイズ...

私のコードのHTMLは次のとおりです。

<nav role="nav" class="navbar"> 
    <a href="" class="menu">button</a> 
</nav> 

<nav role="nav" class="sidebar"> 
    sidebar menu 
</nav> 

<main role="main" class="main-page"> 
    main content 
</main> 

これは私のCSSコードです：

.menu { 
    display: block !important; 
} 

.sidebar { 
    color: #fff; 
    width: 240px; 
    height: 100%; 
    position: fixed; 
    background: #2a3542; 
} 

.main-page { 
    color: #000; 
    margin-left: 240px; 
    position :relative; 
} 

そして、これは私のjqueryのコードです：

<script> 
    $(function() { 
     $('.menu').on('click', function() { 
      if ($('.sidebar').is(':visible')) { 
       $('.sidebar').animate({'width': '0px'}, 'slow', function() { 
        $('.sidebar').hide(); 
       }); 
       $('.main-page').animate({'padding-left': '0px'}, 'slow'); 
      } else { 
       $('.sidebar').show(); 
       $('.sidebar').animate({'width': '240px'}, 'slow'); 
       $('.main-page').animate({'padding-left': '240px'}, 'slow'); 
      } 
     }); 
    }); 
</script> 

私はCDNを使用していbootstrp：jqueryの-3.2.1.slim.min.js/popper.min.js/bootstrap.min.js

Answer 1

なぜ動作していないのかわかりません。これを試してみてください。変更は、/以下を追加します。スクリプトでは

.sidebar { 
    color: #fff; 
    width: 240px; 
    height: 100%; 
    position: fixed; 
    background: #2a3542; 
    left:0px; 
    transition:0.3s all ease-in-out; 
} 

.sidebar.close { 
    left: -240px; 
    transition:0.3s all ease-in-out; 
} 

：

変更/以下のCSSを追加し

$('.menu').on('click', function() { 
    $('.sidebar').toggleClass('close'); 
}); 

Answer 2

はjquery.slim使用しないようにしてください。それはあなたがDOMのアニメーション機能が含まれていないjQueryライブラリのスリムバージョンを使用しているmin.js

https://code.jquery.com/jquery-3.2.1.min.js 

Check the jsfiddle

Answer 3

によく合います。 https://stackoverflow.com/a/35424465/704661

EDIT：あなたのコードが動作しない理由がある...

が下に、このリンクの詳細を参照してください

まず、あなたのことです：

あなたはあなたのコード内のいくつかのバグを持っていましたアンカーに空のhref属性があると、ページがクリックごとにリロードされます。

サイドバーとコンテンツの間に複数のギャップを引き起こしていたメインコンテンツに余白と埋め込みがありました。

HTML

<nav role="nav" class="navbar"> 
    <a href="#" class="menu">button</a> 
</nav> 

<nav role="nav" class="sidebar"> 
    sidebar menu 
</nav> 

<main role="main" class="main-page"> 
    main content 
</main> 

CSS

.menu { 
       display: block !important; 
      } 

      .sidebar { 
       color: #fff; 
       width: 240px; 
       height: 100%; 
       position: fixed; 
       background: #2a3542; 
      } 

      .main-page { 
       color: #000; 
       padding-left: 240px; 
       position :relative; 
      } 

Javascriptを

ここ

$(function() { 
     $('.menu').on('click', function() { 
     if ($('.sidebar').is(':visible')) { 
      $('.sidebar').animate({'width': '0px'}, 'slow', function() { 
       $('.sidebar').hide(); 
      }); 
      $('.main-page').animate({'padding-left': '0px'}, 'slow'); 
     } else { 
      $('.sidebar').show(); 
      $('.sidebar').animate({'width': '240px'}, 'slow'); 
      $('.main-page').animate({'padding-left': '240px'}, 'slow'); 
     } 
     }); 
    }); 

が働いているフィドル例

https://codepen.io/mnikolaus/pen/mqByqK