レスポンシブウェブサイトでCSSが動作しません

Question

私はサイトを反応させようとしていますが、ディスプレイが小さくてもトリプルラインメニューが表示されないようになっています。ここに私のCSSとHTMLコーディングは次のとおりです。

CSS：

@media (max-width: 768px) { 

#button .em:first-child { 
display:block; 
} 
#button .em:nth-child(2) { 
display:block; 
} 
#button .em:nth-child(3) { 
display:block; 
} 
$(document).ready(function() { 
$('.#button').show(); 
}); 

} 

#button .em:nth-child(3) { 
display:none; 
} 

#button{ 

padding:10px; 
position:fixed; 
right:0; 
top:0; 
height: 40px; 
border: 1px solid transparent; 
background:#fff; 
} 

#button .em{ 
background-color: #fff; 
display:block; 
margin-top:0; 
width: 22px; 
height: 4px; 
} 

#button .em + li.em{ 
margin-top: 2px; 
} 

、ここでは、HTMLスニペットです：

<ul> 
    <button id="button" type="button" style="display:none"> 
     <span class="em"><li></li></span> 
     <span class="em"><li></li></span> 
     <span class="em"><li></li></span> 
    </button> 
</ul> 

私は私が間違ってそれをやっている知っているが、任意のヘルプは本当にいただければ幸いです..

Answer 1

は、CSSからこれを削除してみてくださいし、HTMLページ上のJavaScriptコードとして追加：

$(document).ready(function() {$('.#button').show();}); 

とスタイルのようなもののためのCSSコード変更：

.em{ 
    background-color: #fff; 
    display:block; 
    margin-top:0; 
    width: 22px; 
    height: 4px; 
    } 

Answer 2

まず間違いは、あなたがCSSコードの間にはJavaScript/jQueryのコードを書かれている、ということです。

$(document).ready(function() { 
$('.#button').show(); 
}); 

このjqueryを別に書き込むと、「。」を使用したため、javascriptエラーが発生します。と '＃'の両方がボタンにアクセスします。あなたは 'を削除する必要があります。このコードから：$（ '。＃button'）。show（）; と同じでなければなりません：$（ '＃button'）。show（）;