Question

（首先我要道歉，如果我的英语有时很糟糕，我是法国人，所以很难详细解释所有内容）

我正在个人网站上工作，但我的响应式导航出了问题。

我对1024px以下的屏幕尺寸进行了媒体查询。

当我在1024px以上时，我的常规导航栏有一个列表。当我在1024px下时，我看到了出现的小菜单标识，上面有一个点击事件使整个菜单显示并消失。

但问题是，如果我的菜单已关闭并且我将窗口扩展到1024像素以上，则该列表不可见，并且我不知道如何处理该问题。

这是我的代码：

import pygame
import sys
from pygame.locals import *
pygame.init()
clock = pygame.time.Clock()
clock2 = pygame.time.get_ticks()
screen = pygame.display.set_mode((640, 575))
bgx = 0
bgx2 = -800
scroll = 10
pose = 1
background = pygame.image.load("images/background2.png").convert_alpha();
player = pygame.image.load("images/character1.png").convert_alpha();
screen.blit(background, (0, 0))
def draw_screen(x):
screen.blit(background, (x, 0))
def draw_screen2(x2):
screen.blit(background, (x2, 0))
def draw_player(pose):
    if pose == 1:
        player = pygame.image.load("images/character1.png").convert_alpha();
        screen.blit(player, (0, 0))
    elif pose == 2:
        player = pygame.image.load("images/character2.png").convert_alpha();
        screen.blit(player, (0, 0))
    elif pose == 3:
        player = pygame.image.load("images/character3.png").convert_alpha();
        screen.blit(player, (0, 0))
    elif pose == 4:
        player = pygame.image.load("images/character2.png").convert_alpha();
        screen.blit(player, (0, 0))
def set_poses(pose):
    if pose == 1:
        pose = 2
    if pose == 2:
        pose = 3
    if pose == 3:
        pose = 4
    if pose == 4:
        pose = 1

while True: #Loop
    clock2 = pygame.time.get_ticks()
    #Quitting Function
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()
            quit()
    clock.tick(50)
    #Screen Scrolling
    if bgx != 800:
        bgx += scroll
    else:
        bgx = 0
    if bgx2 != 0:
        bgx2 += scroll
    else:
        bgx2 = -800
    #Drawing Items
    draw_screen2(bgx2)
    draw_screen(bgx)
    draw_player(pose)
    if clock2%6 == 0:
        set_poses(pose)
    pygame.display.update()

单击Jquery：

set_poses(pose)

在我的CSS中，我将原始列表隐藏在1024像素以下，并在用户点击菜单徽标时借助jquery显示它。

再次，抱歉，如果难以理解。

Answer 1

解决无效的HTML后，您可以尝试：

问题是来自Jquery的slideUp/Down函数将display属性内联到元素本身，然后当你slideUp并调整浏览器大小时，元素仍然以内联样式隐藏：

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">

你可以解决它添加这个mediaquerie以强制元素阻止1024：

@media (min-width:1025px) {
  #show_n_hide_nav {
    display: block !important;
  }
}

Check this example Fiddle

Answer 2

您最好切换类并添加css过渡以执行幻灯片效果，如果您超过1024，则忽略show类。

$("#button_nav").click(function () {
   $("#show_n_hide_nav").toggleClass("show");
});

如果您仍想使用slideDown() / slideUp()，则必须绑定$(window).resize()事件并检查窗口是否高于/低于1024px。

Answer 3

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});
$(window).resize(function(){
   if($(window).width() > 1024){
      $("#show_n_hide_nav").show();
   }
});

在窗口调整大小时，您必须检查窗口大小并显示导航。

响应式菜单问题

3 个答案: