试图在JS代码中找到错误 - 用Javascript更改CSS

时间:2015-07-24 04:24:19

标签: javascript css dom

我正在编写一个简单的功能来切换移动网站的菜单,但无法让我的代码工作。我已经在网上看了一些例子并且已经关注了它们但是我无法切换菜单。

ImportError: No module

正如您所看到的,我正在尝试简单地检查显示的值,并相应地进行设置。我知道可能有更有效的方法,但现在这就是我所需要的。

方法调用:

<script type="text/javascript"> function toggleMen(id) { var a = document.getElementById(id); if(a.style.display='none'){ a.style.display='block'; } else if (a.style.display='block'){ a.style.display="none"; } } </script>

3 个答案:

答案 0 :(得分:1)

=运算符用于分配值。

===(或==如果您感觉很幸运)运算符用于比较值。

if (a.style.display === 'none') {
    a.style.display = 'block';
} else { 
    a.style.display = 'none';
}

有关=====之间差异的详情,请参阅here

BTW这是一个有效的fiddle。稍微修改一下之后,我意识到你的问题可能是原始显示没有设置为任何东西(a.display.style等于''),所以你的条件永远不会在任何条件下触发。如果是这种情况,通过上述更改,它将在第一次传递时触发else,然后在此之后交替每次传递。 (如果情况并非如此,上述变化仍然可以解决问题)

答案 1 :(得分:0)

尝试a.style.display == 'none'而不是a.style.display = 'none'

答案 2 :(得分:0)

试试这个HTML:

<button onclick="toggleMen('menu');">Button</button>

<div id="menu">
    <div id="gripMenu">
    <div class="menuItem">Home</div>
    <div class="menuItem">Cake Builder</div>
    <div class="menuItem">Order</div>
    <div class="menuItem">Cakes</div>
    <div class="menuItem">Info</div>
    <div class="menuItem">About</div>
</div>

......这个JS:

function toggleMen(id){
    var a = document.getElementById(id);

    if(a.style.display === 'none'){
        a.style.display = 'block';
    } else {
        a.style.display = 'none';
    }
}