当我调整到较小的窗口(响应式设计)时,按钮链接用于.toggle菜单。
我可以使用按钮来切换菜单但是如何在调整大窗口后让菜单返回(例如:我将平板电脑/手机倾斜到横向)?
http://jsfiddle.net/uzDP2/6/(拖动窗口调整大小)
HTML:
<img class="mobileicon" src="http://i.imgur.com/M7AiJ0P.png" width="40" height="29" alt="Mobile icon" />
<div class="menuframe">
<a class="menu" href="#">Home</a>
<a class="menu" href="#">Products and Services</a>
<a class="menu" href="#">Other Link</a>
<a class="menu" href="#">Image Gallery</a>
<a class="menu" href="#">Links</a>
<a class="menu" href="#">Contact</a>
</div>
<div class="menuframe"></div>
CSS:
.mobileicon {
display: none;
}
@media (max-width: 400px) {
.mobileicon {
display: block
}
.menuframe {
display: none;
}
}
使用Javascript:
document.querySelector(".mobileicon").addEventListener("click", function(){
$(".menuframe").toggle();
});
答案 0 :(得分:1)
因为.toggle()
会向元素添加内联css,并且会覆盖类的css。我建议您使用.toggleClass()
解决此问题。
http://jsfiddle.net/b_m_h/uzDP2/9/
jQuery的:
document.querySelector(".mobileicon").addEventListener("click", function(){
$(".menuframe").toggleClass('visible');
});
CSS:
.mobileicon {
display: none;
}
.menuframe {
display: block;
}
.visible{
display: block !important;
}
@media (max-width: 400px) {
.mobileicon {
display: block
}
.menuframe {
display: none;
}
}
答案 1 :(得分:1)
您可以执行以下操作:
将此添加到CSS中,再次为您的框架添加显示:
@media (min-width: 400px){
.menuframe{
display:block;
}
}
您还可以为事件更改添加jQuery侦听器,以触发特定宽度:
$(window).resize(function() {
if($(window).width() > 400){
$(".menuframe").show();
}
});
这可以解决您的问题。
答案 2 :(得分:0)
我认为你可以通过一些检查来调整窗口大小。
$(window).resize(function(){
if(IwantToToggle){
//toggle menu
}
});