Question

这是我的主页http://www.hawaiidolphinswim.com/skin/tabid/92/Default.aspx当您点击菜单时，它会展开，然后当您点击它隐藏的页面上的任何其他位置时。这就是它打算在整个网站上工作的方式。但是，在任何其他页面上，例如http://www.hawaiidolphinswim.com/contact.htm，当您单击菜单然后单击页面上的任何其他位置时，它都不会隐藏。这是用于执行此操作的代码：

function navFunction() {
  var x = document.getElementById("nav");
  if (x.className === "nav" ){
    x.className += " active";
  } else {
    x.className = "nav";
  }
  return false;
}
$(document).on("click", function(e){
  var y = $("#nav").children();
  var z = $(".menu-btn b");
  if ($(e.target).is( y ) || $(e.target).is( z )){
    // console.log("navigation related");
  }else{
    // console.log("not navigation related");
    $(".nav").removeClass("active");
  }
});

如何解决此问题，以便菜单隐藏在内页上的方式与主页上的方式相同？

Answer 1

如果您在问题页面中的chrome dev工具或任何其他Web调试器中执行getEventListeners(document)，您将看到click事件未添加到页面中。

换句话说，click事件侦听器无法正常工作，因为您的代码在文档准备好之前执行。你的javascript代码在创建html dom之前执行，因此无法设置监听器。

尝试将代码置于就绪块中，如下所示：

$(document).ready(function(){ // Put all your js code here });

这样您就可以确保加载文档并且可以正确设置事件监听器。

Answer 2

您正在尝试获取页面中不存在的ID，并且它会出错并阻止脚本的功能。

var video = document.getElementById("youtube"); // this id doesn't exists in the contact me page.

在检查video是否为空之后，在if语句中运行video代码

if (video) {
    var source = "https://i.ytimg.com/vi/50CxpeBse9Y/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=UK441E57Ci7ahRUgUu9ZjjwTRUU"; //youtube thumbnail source//
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function(){
            video.appendChild(image);
        }
    );
    video.addEventListener("click", function(){
        var iframe = document.createElement( "iframe" );
        iframe.setAttribute("frameborder","0");
        iframe.setAttribute("allowfullscreen","");
        iframe.setAttribute("src","https://www.youtube.com/embed/50CxpeBse9Y?autoplay=1" );  //youtube video source//
        this.innerHTML = "";
        this.appendChild( iframe );
    });
}

内页的菜单按钮无法正常工作

2 个答案: