单击取消按钮时返回同一页面的 Javascript 代码

Question

我正在使用 javascript 代码展开和折叠我的 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';

           else
              e.style.display = 'none';

        }

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

          e.innerHTML=f.innerHTML;

        }

    </script>

    <a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>
<div id="id1" style="display:none;">This is foo</div>

 <a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see      wonder</div></a>
<div id="id2" style="display:none;">Tsdgdfsehd
<div> <a href="#"  onclick="edit('id2','id3');">Edit</a></div>
</div>

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

    </div>

我面临的问题是..当我单击第二个 div 时，它正在展开并且我在第二个 div 中提供了一个编辑选项..然后单击编辑它覆盖第二个 div 元素并显示第三个 div元素。同样，在第 3 个 div 中，我给出了取消编辑部分并显示第 2 个 div 内容的链接..但它没有显示..

我正在等待帮助..

提前致谢

Answer 1

使用

location.reload(); 

在取消点击时使用以下函数

function cancel(){
       location.reload(); 
}

<a href="#"  onclick="cancel()">cancel</a>

使用以下代码重新加载 div 2

function edit(id,item)
 {
    var e = document.getElementById(id);
    var f = document.getElementById(item);
          // Add this line additional
    document.getElementById('id4').innerHTML=e.innerHTML;
    e.innerHTML=f.innerHTML;
  }
function cancel(){
    document.getElementById('id2').innerHTML=document.getElementById('id4').innerHTML;
}

 <a href="#"  onclick="cancel()">cancel</a>

同时添加这个隐藏的div

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