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

时间:2017-05-18 18:20:48

标签: javascript jquery

这是我的主页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");
  }
});

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

2 个答案:

答案 0 :(得分:1)

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

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

尝试将代码置于就绪块中,如下所示:

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

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

答案 1 :(得分:0)

您正在尝试获取页面中不存在的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 );
    });
}