Question

我正在尝试使用响应式菜单，我的目标是显示一个正常的菜单：当浏览器调整为较小的尺寸时将其替换为“无”，而是替换为网格符号（目前为止＆＃39;只是一个彩色的盒子。）

有些HTML在这里：

<div class="mplace">

<a class="grid" href="#"></a>
<a class="close" href="#"></a>

<div class="holder">

<ul class="menlist">
<li><a href="http://www.w3schools.com">Home</a></li><li>
<a href="http://www.bing.com">Bing</a>
</li><li><a href="http://www.yahoo.com">Yahoo</a>
</li><li><a href="http://www.google.com">Google</a>
</li><li><a href="http://www.w3schools.com/about/default.asp">Contact</a></li>

</ul>

</div>
</div>

无论如何，我不知道这是否是一个真实世界的问题，但我希望能够点击该符号并显示菜单，然后当点击关闭符号时，菜单再次被隐藏。然后普通的CSS应该覆盖jquery，这样如果浏览器再次调整为全屏，网格符号将被隐藏。

我遇到的问题是我使用的jquery没有发生这种情况。我尝试使用toggleClass代替在display：none和display：block之间切换，但是当你回到全屏时会显示网格符号。

无论如何。此jquery可以在符号之间切换并显示和隐藏菜单，但是当您单击符号后返回全屏时它不会返回显示：无。您可以在此JSfiddle

中查看该问题

$(document).ready(function() {

$('.grid').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.grid').hide();
    $('.close').show();
});

$('.close').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.close').hide();
    $('.grid').show();
});

});

然而，我想要做的就是像这样把toggleClass。在这种情况下，隐藏＆＃39;和＆＃39;显示＆＃39;将在CSS中作为display：none和display：block

$(document).ready(function() {

$('.grid').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.grid').toggleClass('hide');
    $('.close').toggleClass('show');
});

});

这意味着当单击网格按钮时，它将被设置为display：none，而x符号将设置为display：block。反之亦然会发生一些更多的问题。

我已经尝试了所有我能想到的东西，但它只是没有用。

Answer 1

你真的只需要使用toggleClass然后将一个类切换到你的菜单并给你原始的菜单css display：none然后切换的类css of display：block如下：

您可以将菜单打开和菜单关闭按钮放在由逗号分隔的同一jquery点击功能上，它会相应地添加和删除该类。

这是一个小提琴Fiddle Demo

$(document).ready(function() {
  $('.grid, .menu-close').click(function(){
        $('.menu-list').toggleClass("menu-open");
  });
});

然后你的css将如下所示：

.menu-list{
  display:none;
}
.menu-list.menu-open{
  display:block;
}

在点击功能上使用toggleclass两次而不是show（）hide（）用于响应式菜单

1 个答案: