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中删除它，并将其作为javascript代码添加到html页面：

$( 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（）;

CSS不适用于reponsive网站

2 个答案: