这是我的主页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");
}
});
如何解决此问题,以便菜单隐藏在内页上的方式与主页上的方式相同?
答案 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 );
});
}