的JavaScript的onclick需要两次点击

我的问题是，当onclick触发它不执行toggleNew功能，但是当我点击div它的执行只是因为它应该进行第二次......的JavaScript的onclick需要两次点击

HTML：

<div id="aside_main"> 
    <div onclick="toggleNew();">click</div> 
    content 
</div> 
<div id="aside_new"> 
    content 
</div>

JS：

function toggleNew() { 
    var e = document.getElementById('aside_main'); 
    var se = document.getElementById('aside_new'); 
    if(e.style.display == 'block') { 
    e.style.display = 'none'; 
    se.style.display = 'block'; 
    } else { 
    e.style.display = 'block'; 
    se.style.display = 'none'; 
    } 
}

CSS：

#aside_main { 
    display: block; 
} 
#aside_new { 
    display: none; 
}

这里发生了什么？如何让用户在第一次点击div时能够正常工作？

来源

2014-02-18 Abbe

是div的设置为'显示：block'默认或已经将它们改为'显示：直列block'或其他什么东西？ –

'aside_main'是'display：block'，'aside_new'是'display：none'。 – Abbe

这将无法正常工作，因为您正在使用隐藏的'div＃aside_main'内的以下行。

<div onclick="toggleNew();">click</div>

尝试之外保持它像这个 -

<div onclick="toggleNew();">click</div> 
<div id="aside_main"> 
    content 
</div> 
<div id="aside_new"> 
    content2 
</div>

而且在javascript它不检查中如果条件“e.style.display”第一次。

尝试使用

if(e.offsetWidth > 0 || e.offsetHeight > 0){ 
     e.style.display = 'none'; 
     se.style.display = 'block'; 
    } 
    else 
    { 
     e.style.display = 'block'; 
     se.style.display = 'none'; 
    }

来源

2014-02-18 12:17:11

但是，当我点击它并没有隐藏，它是第二次工作... – Abbe

您的JavaScript检查即如果（e.style.display =='块'）第一次不工作.. –

你的JS作品:-)（但它很丑：P） – Abbe

e.style.display表示由style属性定义的元素的样式，它不会为您提供计算的样式。获取计算样式使用

if (window.getComputedStyle(e,null).getPropertyValue("display") == 'block){

来源

2014-02-18 11:54:42 Musa

对不起，只是我写的例子错了... – Abbe

@Abbe请参阅更新 – Musa

我确实使用CSS来设计它们，请参阅编辑。 – Abbe

你需要调用函数就像在div的onclick onclick="toggleNew();"。我刚刚在fiddle中添加了您的代码。

来源

2014-02-18 11:55:19 Vinoth

对不起，只是我写了一个错误的例子... – Abbe

我更新了小提琴，该功能是第一次执行时，我点击div。 http://jsfiddle.net/vinbtechdf/dejW3/1/ – Vinoth

当您添加CSS时，它不再执行第一次（即编辑）。 – Abbe

在您的条件：使用onclick="toggleNew();" //调用

这是通向通话功能。

如果你想通的功能，那么你只能使用toggleNew //传递

这是两个不同的活动。

来源

2014-02-18 12:00:00

它的工作第二次我点击... – Abbe

这里是这样做的另一种方式。你只需要添加两行到你的javascript代码 -

document.getElementById('aside_main').style.display='block'; 
    document.getElementById('aside_new').style.display='none';

在JavaScript中设置初始显示属性。这将工作正常。

来源

2014-02-18 12:40:10

可能不是最好的答案，但解决方法是使用样式属性内联CSS。像这样：

<div id="aside_main" style="display: block; border: 2px solid green;"> 
    <div onclick="toggleNew();">click</div> 
    content 
</div> 
<div id="aside_new" style="display: none; border: 2px solid red;"> 
    content 
</div>

来源

2014-02-18 12:59:27

的JavaScript的onclick需要两次点击

回答

相关问题