Javascript切换元素的显示不工作 [英] Javascript toggling element's display not working

查看:186
本文介绍了Javascript切换元素的显示不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我做了这么几次,但由于某种原因,我不知道为什么#下拉列表div不显示时#下拉按钮被点击...

I've done this dozens of times, but for some reason I can't figure out why the #dropdown-list div isn't displaying when the #dropdown-button is clicked...

<html>
<head>
<script type="text/javascript">
    function toggleDropdown(optionalArg){
        optionalArg = (typeof optionalArg == "undefined")?'defaultValue':optionalArg
        ele = document.getElementById("dropdown-list");
        //If optionalArg is 0 we want to hide it
        if(optionalArg == 0){
            ele.style.display=='none'
        }
        //If optionalArg is 1 we want to show it
        else if(optionalArg == 1){
            ele.style.display=='block';
        }
        //If optionalArg is NULL we want to toggle it's display
        else{
            if(ele.style.display=='none')
                ele.style.display=='block';
            else
                ele.style.display=='none';
        }
    }
</script>
    <style type="text/css">
        #dropdown-container{
            width:200px;
            border:1px solid black;
            overflow: hidden;
        }
        #dropdown-text {
            width:176px;
            float:left;
        }
        #dropdown-button {
            text-align:center;
            width:20px;
            border:2px outset black;
            float:left;
        }
        #dropdown-button:active {
            border:2px inset black;
        }
        #dropdown-list {
            display:none;
            width:200px;
            max-height:250px;
            background-color:#b0c4de;
            border:1px solid #cccccc;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div id="dropdown-container">
        <div id="dropdown-label">
            <input id="dropdown-text" type="text" />
            <div id="dropdown-button" onclick="toggleDropdown();">V</div>
        </div>
        <div id="dropdown-list">
            <ul class="dropdown-ul">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </div>
</body>


应该很简单,但我认为这只是晚了,用这个简单的JS。感谢您查看它!

Should be really simple, but I think it's just late and I'm having issues with this simple bit of JS. Thanks for taking a look at it!

推荐答案

您使用等于运算符( == )而不是赋值( = ):

You use the equality operator (==) instead of assignment (=):

        if(ele.style.display=='none')
            ele.style.display=='block';
        else
            ele.style.display=='none';

应为

        if(ele.style.display=='none')
            ele.style.display='block';
        else
            ele.style.display='none';

这篇关于Javascript切换元素的显示不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆