Открыть и закрыть плавающий слой по одной и той же ссылке?

У меня есть плавающий слой, который активируется по этой ссылке:

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

Это плавающий слой:

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

Сценарий:

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

Я хочу, чтобы «КНОПКА» открывала, а также закрывала этот плавающий слой. Таким образом, он открывается и закрывается в одной и той же ссылке. Но сейчас я могу закрыть его только через этот "closeX" x. Как мне это сделать?


javascript html css layer floating
person Owly    schedule 18.10.2014    source источник
comment
используйте jQuery, вам очень легко решать кроссбраузерные проблемы.   -  person Koti Panga    schedule 19.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

jQuery – это стандартная многофункциональная кроссбраузерная библиотека JavaScript
Изучение и использование jQuery в ваших приложениях — лучший способ все бизнес-приложения Вот ссылки на сайты API и Leaning

Фрагмент ниже для вас

<!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>
person Koti Panga    schedule 18.10.2014
comment
Пожалуйста, не используйте jQuery таким образом. Узнайте о делегированных событиях и о том, как с их помощью отделить представления от логики приложения. ! - person nietonfir; 19.10.2014
comment
@nietonfir Спасибо за уведомление :), и мне нравится функция делегирования событий. К вашему сведению... в приведенном выше фрагменте нет вложения события, сделанного с помощью jQuery. Цель примера — решить проблему с минимальными усилиями и внедрением jQuery. - person Koti Panga; 20.10.2014