jquery - 在点击功能上使用 toggleclass 两次而不是响应式菜单的 show() hide()

Question

我正在试验一个响应式菜单，我的目标是有一个正常的菜单去显示:当浏览器被调整到一个更小的尺寸时，没有，而是被一个网格符号取代(现在它只是一个彩色框)。

一些 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。在这种情况下，“隐藏”和“显示”类在 CSS 中将作为显示:无和显示: block

$(document).ready(function() {

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

});

这意味着当单击网格按钮时，它将设置为显示:无，而 x 符号将设置为显示: block 。然后反之亦然会发生一些更多的 jquery。

我已经尝试了所有我能想到的方法，但就是行不通。

Answer 1

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

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

这是一个 fiddle 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;
}