显示和隐藏 div 的 javascript 函数答案

【问题标题】：javascript functions to show and hide divs显示和隐藏 div 的 javascript 函数
【发布时间】：2012-07-09 12:50:17
【问题描述】：

您好，我有以下 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>

由于某种原因，显示功能按其应有的方式工作，但关闭按钮不起作用。因此，如果有人可以帮助我，我将不胜感激。非常感谢。

【问题讨论】：

您是否考虑过使用 jQuery 进行这些操作？
不，我以前从未使用过 jQuery。
你在函数调用周围缺少引号
函数两边应该有引号：onclick="close()" 另外，与onclick关联的锚点中没有内容...
感谢您的回答。设置引号并不能解决问题。

标签： javascript function html

【解决方案1】：

<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>

【讨论】：

这行得通。还剩下两个问题。第一个是锚不再起作用。通过单击href，它应该将锚点设置为站点的顶部。第二个仍然有点复杂。通过调用 hide() 函数，应该会自动聚焦一个输入字段。
可以去掉“return false;”添加锚点，但我认为，代码将不再起作用。可以通过以下方式实现自动聚焦：document.getElementById('inputfieldID').focus();
好的，我做了以下事情：我从两个函数中删除了 return，将 hide() 重命名为 clo() 并设置了 focus()。一切都很好。 besten dank und grüße 柏林
返回假；声明对我有用！！作为一个新手，我不知道原因：（

【解决方案2】：

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

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

然后使用;

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

注意“className”的大小写，这让我很不爽

【讨论】：

【解决方案3】：

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();
    });
});

【讨论】：

【解决方案4】：

你需要里面的链接是可点击的，也就是说它需要一个带有一些内容的href，而且close()是window的内置函数，所以你需要更改函数的名称以避免冲突.

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

另外，如果您想要一个真正的“按钮”而不是链接，您应该使用<input type="button"/> 或<button/>。

【讨论】：

+1，因为您是唯一提及该按钮的人。我一直在看其他代码并想“他在说什么按钮？我什么都没看到！”大声笑

【解决方案5】：

检查一下：

点击这里

<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>

【讨论】：

【解决方案6】：

例如，将关闭函数重命名为“隐藏”，它将起作用。

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

你可以用这样的东西压缩这两个 [就像 jQuery 一样]：

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

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

【讨论】：