2

我正在使用 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 内容的链接..但它没有显示..

我在等帮助。。

提前致谢

4

4 回答 4

0

利用

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>
于 2013-06-18T05:18:17.980 回答
0

你的解决方案在这里

在这里检查jsfiddle

 <%-- 
Document   : ul
Created on : Jun 18, 2013, 10:23:01 AM
Author     : Genesh
 --%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>JSP Page</title>

</head>
<body>
<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);
          e.style.display = 'block';
           var s = document.getElementById(item);
          s.style.display = 'none';
    }
       function edit1(id,item)
    {
          var e = document.getElementById(id);
          e.style.display = 'block';
      var s = document.getElementById(item);
          s.style.display = 'none';
    }

</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('id3','id2');">Edit</a></div>
 </div>
<div id="id3" style="display:none;">Edit
<div> <a href="#"  onclick="edit1('id2','id3');">cancel</a></div>
</div>
</body>
</html>
于 2013-06-18T06:06:47.457 回答
0

取消调用包含以下内容的 javascript 函数：

window.location=window.location;
于 2013-06-18T05:02:58.607 回答
0

这是我在您的代码中找到的唯一方法

onclick="toggle_visibility('id2');

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

 </div>
于 2013-06-18T05:24:13.493 回答