简体   繁体   English

打开和关闭浮动层相同的链接?

[英]Open and close floating layer same link?

I have a floating layer that activates through this link: 我有一个通过此链接激活的浮动层:

<a href="javascript:ToggleFloatingLayer('FloatingLayer',1);"> BUTTON </a>

This is the floating layer: 这是浮动层:

<div id="FloatingLayer">
           <div id="closeX"> <a href="#" onClick="ToggleFloatingLayer('FloatingLayer',0);return false">x</a>
           </div>

The script: 剧本:

<script language="JavaScript1.2">

      function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
      {
        if(document.layers)    //NN4+
        {
           document.layers[DivID].visibility = iState ? "show" : "hide";
        }
        else if(document.getElementById)      //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(DivID);
            obj.style.visibility = iState ? "visible" : "hidden";
        }
        else if(document.all)   // IE 4
        {
            document.all[DivID].style.visibility = iState ? "visible" : "hidden";
        }
      }
    </script>

I want the "BUTTON" to open and also close this floating layer. 我希望“按钮”打开并关闭此浮动层。 So it opens and closes in the same link. 因此,它在同一链接中打开和关闭。 But right now I can only close it through that "closeX" x. 但是现在我只能通过“ closeX” x关闭它。 How can I do it? 我该怎么做?

jQuery is standard cross-browser and feature-rich JavaScript library jQuery是标准的跨浏览器和功能丰富的JavaScript库
Learning and Using jQuery in your applications is the best across all business apps Here are links for api and leaning sites 在您的应用程序中学习和使用jQuery是所有业务应用程序中最好的。这是api和倾斜站点的链接

Snippet is below for you 以下是您的摘录

<!DOCTYPE html>
<html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    function toggleFloatingLayer(divID) {
      $("#" + divID).toggle();//its only single line to manage toggling for all browsers
    }
  </script>
</head>

<body>

  <a href="#" onclick="toggleFloatingLayer('FloatingLayer')"> BUTTON </a>

  <div id="FloatingLayer" style="display:none;border:solid 2px silver;">
    <div id="closeX" style="background:#efefef"> <a href="#" onClick="toggleFloatingLayer('FloatingLayer')">x</a>
    </div>
    <div>
      Test content of Floating layer
    </div>
  </div>

</body>

</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM