关于html点击下拉菜单

张为 发布于 2014/01/21 20:37
阅读 4K+
收藏 0

实现一个html下拉菜单,点击出现菜单,再点击消失。 一开始用jQuery实现的 就是通过点击事件改变菜单css中的display方法。 但是因为网页做的很简单。所以使用jQuery没有必要。我就想使用原生js实现。可是实现了点击函数后,点击出现菜单,再点击就不消失了。 原生应该如何实现。

jQuery实现如下没有问题。

$(document).ready(function()
{
$("#click_button").click(function()
{
var tag=$(this).attr('id');
if(tag==1)
{
$("#submenu").hide();
$(this).attr('id', '0');
}
else
{
$("#submenu").show();
$(this).attr('id', '1');
}});
});


原生js如下 就只能点击一次了

window.onload = function(){
document.getElementById("click_button").onclick=function(){
var tag = this.getAttribute('id');
        if (tag) {
        document.getElementById("submenu").style.display = "block";
        this.setAttribute('id', false);
        } else {
        document.getElementById("submenu").style.display = "none";
        this.setAttribute('id', true);
        };
    };
}

加载中
0
一堆BUG
一堆BUG

var tag = this.getAttribute('id');

通过alert(typeof(tag));结果是string所以不会到if 的else中去,你可以在

var tag = this.getXXXXX后面加个

tag = eval(tag);

或是把这个string转成boolean型就可以了

document.getElementById("click_button").onclick=function(){
			var tag = this.getAttribute('id');
			tag = eval(tag);
	        if (tag) {
		        document.getElementById("submenu").style.display = "block";
		        this.setAttribute('id', false);
	        } else {
		        document.getElementById("submenu").style.display = "none";
		        this.setAttribute('id', true);
	        };
    	};




张为
张为
解决了。多谢。
0
不喜欢吃素的菜鸟
不喜欢吃素的菜鸟

this.setAttribute('id', false);

var tag = this.getAttribute('id');

对非常底层的东西懂的不多,但是你将id的值改了,你的原生html的id都变成false了,所以你用document.getElementById("click_button")会获取不到值。你随便放到其他属性,例如"myshow"属性下之类的。

你的原生js写法,就像你记得有一件事情要做,而且你已经记录到日记本上。你每次做这件事情的时候,你都会去日记本上找要做的具体事情,但是做了事情后就把日记本毁掉了。

jquery的写法好像你将要做的事情写成日记本上,同时也写在你自己的脑海里,就算你将日记本毁了,你还是做到你要做的事情。

jquery.onclick可以多次绑定,而且都会执行。

html.onclick多次绑定,只有一次执行。


原生的js绑定多次不覆盖,下面的方式好像是属于DHTML中有提到。还有你的if(tag)你知道会发生什么事情吗,可以试下if(""),if(0),if(-0),if(其他)之类。

也可以参考如下地址:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

好多东西不怎么清除,╮(╯▽╰)╭

/**
 * 给对象动态添加函数
 * @param element 要操作的对象
 * @param evType 动作类型
 * @param fn 函数
 * @param useCapture
 */
function addEvent(element, evType, fn, useCapture){
    if(element.addEventListener){
        if(useCapture != false){
            useCapture = true;
        }
        var temp = element.addEventListener(evType, fn, useCapture); // DOM 2.0
    } else if(element.attachEvent){
        var temp = element.attachEvent("on" + evType, fn); // IE5+
    } else {
        element["on" + evType] = fn; // DOM 0
    }
}


不喜欢吃素的菜鸟
不喜欢吃素的菜鸟
其实你的代码我没试过,可能有说错误的地方。
返回顶部
顶部