Question

我正在尝试做响应式设计，在屏幕上更改我正在显示导航按钮，点击它删除旧课程并添加新课程，它不会滑落它只是显示得太快而且我我想再次点击导航按钮，我该怎么做。

$(document).ready(function(){

    var screenSize = 0;

$('#responsiveBtn').on('click', function(){

    $('#topMenuDiv').removeClass('topMenu-no-resp').addClass('topMenu-  
    resp');
    $('#topMenuDiv ul').removeClass('topnav').addClass('topnav-resp');

});



$(window).resize(function() {
      screenSize = ($(window).width());

      if(screenSize > 1200){

    $('#topMenuDiv').removeClass('topMenu-resp').addClass('topMenu-no-
    resp');
    $('#topMenuDiv ul').removeClass('topnav-resp').addClass('topnav');

      }

});

Answer 1

您可以使用.slideToggle();功能切换菜单。我认为link可以帮到你。

$('#topMenuDiv').slideToggle();

Answer 2

jQuery允许您使用hide（）/ show（）或toggle（）函数轻松隐藏和显示元素。

$('#responsiveBtn').click(function() { 
    $("#topMenuDiv").toggle();
});

如需更多阅读，请查看http://www.w3schools.com/jquery/jquery_hide_show.asp

如何在jquery中单击时添加类和幻灯片切换

2 个答案: