javascript函数显示和隐藏div

时间:2012-07-09 12:50:18

标签: javascript function html

您好我有以下2个JavaScript函数来打开div并关闭它。

<script>
    function show() {
        if(document.getElementById('benefits').style.display=='none') {
          document.getElementById('benefits').style.display='block';
        }
    }
</script>



<script>
    function close() {
        if(document.getElementById('benefits').style.display=='block') {
          document.getElementById('benefits').style.display='none';
        }
    }  
</script>

这是html:

<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
   some input in here plus the close button
   <div id="upbutton"><a onclick=close()></a></div>
</div>

出于某种原因,show函数应该如何工作,但关闭按钮不起作用。所以,如果有人可以帮助我,我真的很感激。非常感谢。

8 个答案:

答案 0 :(得分:21)

<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 


 <div id="opener"><a href="#1" name="1" onclick="return show();">click here</a></div> 
    <div id="benefits" style="display:none;">some input in here plus the close button 
           <div id="upbutton"><a onclick="return hide();">click here</a></div> 
    </div> 

答案 1 :(得分:5)

我通常使用类来执行此操作,这似乎迫使浏览器重新评估所有样式。

.hiddendiv {display:none;}
.visiblediv {display:block;}

然后使用;

<script>  
function show() {  
    document.getElementById('benefits').className='visiblediv';  
}  
function close() {  
    document.getElementById('benefits').className='hiddendiv';  
}    
</script>

请注意“className”的大写让我感到非常沮丧

答案 2 :(得分:4)

jQuery的美妙之处在于我们可以做到以下几点:

$(function()
{
    var benefits = $('#benefits');

    // this is the show function
    $('a[name=1]').click(function()
    { 
        benefits.show();
    });

    // this is the hide function
    $('a', benefits).click(function()
    {
        benefits.hide();
    });
});

或者,您可以使用1个按钮切换显示,如下所示:

$(function()
{
    // this is the show and hide function, all in 1!
    $('a[name=1]').click(function()
    { 
        $('#benefits').toggle();
    });
});

答案 3 :(得分:3)

你需要里面的链接是可点击的,这意味着它需要带有一些内容的href,而且,close()是窗口的内置函数,所以你需要更改函数的名称以避免冲突

<div id="upbutton"><a href="#" onclick="close2()">click to close</a></div>

此外,如果您想要一个真正的“按钮”而不是链接,则应使用<input type="button"/><button/>

答案 4 :(得分:2)

检查一下:

点击这里
<div id="benefits" style="display:none;">some input in here plus the close button
       <div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>

答案 5 :(得分:2)

例如,将关闭功能重命名为“隐藏”,它将起作用。

function hide() {
    if(document.getElementById('benefits').style.display=='block') {
      document.getElementById('benefits').style.display='none';
    }
} 

答案 6 :(得分:0)

Close似乎是某种保留字(可能是指window.close)。将其更改为其他内容似乎可以解决问题。

http://jsfiddle.net/c7gdL/1/

答案 7 :(得分:0)

你可以用这样的东西压缩这两个[像jQuery那样]:

function toggleMyDiv() {
 if (document.getElementById("myDiv").style.display=="block"){
  document.getElementById("myDiv").style.display="none"
  }
 else{
  document.getElementById("myDiv").style.display="block";
 }
}

..并在两个按钮中使用相同的功能 - 或者通常在两个功能的页面中使用。