Question

以下是我用于扩展和折叠我的div的代码。现在我想对代码进行一些修改。当我扩展div时，带有div内容的A“[ - ]”以及当我崩溃带有div内容的“[+]”时应该来。

<style type="text/css">
.gap
{

 border:1px solid black

}
</style>

<script type="text/javascript">

    function toggle_visibility(id) {
       var e =document.getElementById(id);

       if(e.style.display == 'none')
        {
          e.style.display = 'block';
          col.innerHTML=valu;
        }
       else
       {
          e.style.display = 'none';

       }
    }

    function edit(id,item)
    {
       var e = document.getElementById(id);
       var f = document.getElementById(item);

     document.getElementById('id4').innerHTML=e.innerHTML;     
      e.innerHTML=f.innerHTML;
      window.location=window.location;

    }
    function cancel(id,item)
    {

        document.getElementById(id).innerHTML=document.getElementById(item).innerHTML;
    }

</script>

<div class="gap" ><a href="#" onclick="toggle_visibility('id1');" id="x">[+]<div id="click" style="float:right;">Click here</div></a></div>

<div id="id1" style="display:none;">This is foo</div>


<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">click here1</div></a>

<div id="id2" style="display:none;">click here1
<div> <a href="#"  onclick="edit('id2','id3');">Edit</a></div>
</div>




<div id="id3" style="display:none;">Edit
<div> <a href="#"  onclick="cancel('id2','id4')">cancel</a></div>
</div>


<div id="id4" style="display:none;"></div>

我在等待你的帮助。

提前致谢

Answer 1

这是你想要的吗？

function toggle_visibility(id) {
   var e =document.getElementById(id);
   var label = document.getElementById("x");

   if(e.style.display == 'none')
    {
      label.innerHTML = label.innerHTML.replace("[+]","[-]");
      e.style.display = 'block';
      col.innerHTML=valu;
    }
   else
   {
      label.innerHTML = label.innerHTML.replace("[-]","[+]");
      e.style.display = 'none';

   }
}

Answer 2

使用javascript的show和hide函数来显示和隐藏div：

<div id="showHide" class="open" style="display: block;" onclick="showHide();">
    <!-- Your Contents -->
</div>

使用Javascript：

function showHide(currentElem) {
    if (currentElem.ClassName.indexOf('open') > -1) {
        // This means its open, now close it
        currentElem.className = 'closed';
        currentElem.style.display = 'none'; 
    } else {
        currentElem.className = 'open';
        currentElem.style.display = 'block';  
    }
}

Answer 3

function toggle_visibility(id) {
    var e = document.getElementById(id);

    if (e.style.display == 'none') {
        document.getElementById('x').innerText = '[-]';
        e.style.display = 'block';
        //col.innerHTML = valu;
    }
    else {
        e.style.display = 'none';
        document.getElementById('x').innerText = '[+]';
    }
}

单击div上的[+]时，此代码显示div并将[+]更改为[ - ]，反之亦然。如果你想将[+]更改为其他内容？比如'[+]点击这里'，您只需更改代码中的相应字符串即可。我不明白你想要改变内容是什么意思......你究竟想改变什么？

使用带有[+]和[ - ]的javascript展开和折叠

3 个答案: