10

こんにちは、div を開いて閉じるには、次の 2 つの JavaScript 関数があります。

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

何らかの理由で、表示機能は正常に機能しますが、閉じるボタンは機能しません。ですから、私を助けてくれる人がいれば、本当に感謝しています。どうもありがとう。

4

8 に答える 8

23 
<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>
于 2012-07-09T13:04:06.880 に答える
5

私は通常、クラスでこれを行います。これにより、ブラウザはすべてのスタイリングを再評価する必要があるようです。

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

次に使用します。

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

私をよくつまずかせる「className」の大文字と小文字に注意してください

于 2012-07-09T12:58:23.867 に答える
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();
    });
});
于 2012-07-09T13:01:22.933 に答える
3

内部のリンクをクリック可能にする必要があります。つまり、何らかのコンテンツを含む href が必要です。また、close() は window の組み込み関数であるため、競合を避けるために関数の名前を変更する必要があります。

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

また、リンクではなく実際の「ボタン」が必要な場合は、<input type="button"/>またはを使用する必要があります<button/>。

于 2012-07-09T13:01:58.530 に答える
2

たとえば、終了関数の名前を「hide」に変更すると機能します。

function hide() {
    if(document.getElementById('benefits').style.display=='block') {
      document.getElementById('benefits').style.display='none';
    }
}
于 2012-07-09T13:03:46.087 に答える
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>
于 2012-07-09T12:55:39.957 に答える
0

Closeは、ある種の予約語のようです（おそらくwindow.closeを参照しています）。それを別のものに変更すると、問題が解決するようです。

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

于 2012-07-09T13:10:06.973 に答える
0

次のようなもので2つを圧縮できます[jQueryのように]：

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

..そして、2 つのボタンで同じ機能を使用するか、通常はページで両方の機能を使用します。

于 2013-11-23T11:29:36.607 に答える