个人中心
gpt4 book ai didi

javascript - 使用 Jquery 从其他文件加载导航时的响应式菜单

转载 作者：行者123 更新时间：2023-12-03 01:39:40 24 4
gpt4 key购买 nike

我正在做一个小项目。为了保持文件干净，我将它们分成单独的 HTML 文件，并通过 Jquery 加载它们。这一直有效，但现在在增加响应能力时。这不行!当我将代码直接放入 HTML 中时，它就可以工作了!有人可以帮助我吗？

PS:文件以 HTML 格式加载，因为我可以看到导航栏，但我无法单击按钮来打开菜单。

这是我的代码:

navresponsive.html

<a href="javascript:void(0)" class="close"><img src="images/close.png" alt="close icon" class="closeIcon"></a>
<a href="index.html" id="homepageResponsive">Thuispagina</a>
<a href="story.html" id="storyResponsive">Mijn Verhaal ;)</a>
<a href="pics.html" id="picsResponsive">Mijn foto's</a>
<a href="despacito.html" id="despacitoResponsive">Mijn despacito 2 cover</a>

故事.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Page!</title>
    <link rel="icon" href="./assets/pictures/salcosecond.ico">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  </head>
  <body>

    <div class="navResponsive" id="navResponsive">
    </div>

    <div class="nav" id="nav">
    </div>
</html>

main.js

$(document).ready(() => {

// Navigation bar

$('#header').load('files/header.html');
$('#nav').load('files/nav.html');
$('#navResponsive').load('files/navresponsive.html');

// Responsive nav
  $(".open").click(function(){
    $(this).css("display", "none");
    $(".navResponsive").css("width", "100%");
  });

  $(".close").click(function(){
    $(".navResponsive").css("width", "0");
    $(".open").css("display", "block");
  });
});

最佳答案

由于内容是动态加载的，因此在页面加载到 DOM 之前，事件将被附加，其中您必须遵循事件委托(delegate)或使用 > promise 。

事件委托(delegate)

更改点击事件如下:

$(document).on('click',".open", function(){
   $(this).css("display", "none");
   $(".navResponsive").css("width", "100%");
});

$(document).on('click',".close", function(){
  $(".navResponsive").css("width", "0");
  $(".open").css("display", "block");
});

promise 

var promises = [];
promise.push($('#header').load('files/header.html'));
promise.push($('#nav').load('files/nav.html'));
promise.push($('#navResponsive').load('files/navresponsive.html'));

Promise.all(promise).then(function(){
  $(".open").click(function(){
    $(this).css("display", "none");
    $(".navResponsive").css("width", "100%");
  });

  $(".close").click(function(){
    $(".navResponsive").css("width", "0");
    $(".open").css("display", "block");
  });

});

关于javascript - 使用 Jquery 从其他文件加载导航时的响应式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50910290/

24 4 0
文章推荐： javascript - Webpack 初始化失败
文章推荐： Javascript 引用复制问题
文章推荐： javascript - jQuery.verto 不是构造函数
文章推荐： javascript - 如何在 Vue Native 中使用 Firebase 身份验证