Скрытие выпадающего меню без его прошивки с прототипом - PullRequest
Новая
       23

Скрытие выпадающего меню без его прошивки с прототипом

0 голосов
/ 15 марта 2010

У меня есть несколько раскрывающихся списков и дивов, которые скрываются при загрузке страницы и могут переключаться нажатием или наведением мыши, но некоторые из них вспыхивают, поскольку JavaScript не запускается во времени. У меня их отображение изначально настроено на блокировку, а затем я использую JavaScript / prototype, чтобы найти элемент и скрыть его. Я попытался загрузить эти "hider" функции с помощью dom: загружен, но все еще мигает. Это пример раскрывающейся функции инициализации прототипа. От http://www.makesites.cc/programming/by-makis/simple-drop-down-menu-with-prototype/:

var DropDownMenu = Class.create();
  DropDownMenu.prototype = {
     initialize: function(menuElement) {
    menuElement.childElements().each(function(node){
      // if there is a submenu
      var submenu = $A(node.getElementsByTagName("ul")).first();
      if(submenu != null){
        // make sub-menu invisible
        Element.extend(submenu).setStyle({display: 'none'});
        // toggle the visibility of the submenu
        node.onmouseover = node.onmouseout = function(){
          Element.toggle(submenu);
        }
      }
    });
  }
};

Есть ли лучший способ скрыть div или выпадающие списки, чтобы избежать этого мигания?

Ответы [ 2 ]

1 голос
/ 16 марта 2010

Вы всегда рискуете мерцать, когда пытаетесь скрыть элементы после загрузки страницы. Я предлагаю вам дать рассматриваемым элементам встроенный стиль, такой как display:none; или класс css с той же настройкой.

Из использованного синтаксиса создания класса я понимаю, что вы используете что-то вроде Prototype версии 1.5.x. Вот мое мнение о том, как бы я это сделал с этой версией (конечно, было бы лучше перейти на последнюю версию): 

    <script type="text/javascript">
var DropDownMenu = Class.create();
DropDownMenu.prototype = {
  initialize: function(menuElement) {
    // Instead of using 2 listeners for every menu, listen for
    // mouse-ing on the menu-container itself.
    // Then, find the actual menu to toggle when handling the event.
    $(menuElement).observe('mouseout', DropDownMenu.menuToggle);
    $(menuElement).observe('mouseover', DropDownMenu.menuToggle);
  }
};
DropDownMenu.menuToggle = function (event) {
  var menu = DropDownMenu._findMenuElement(event);
  if (menu) {Element.toggle(menu);}
};
DropDownMenu._findMenuElement = function (event) {
  var element = Event.element(event);
  return Element.down(element, 'ul');
}
var toggler = new DropDownMenu('menus');
</script>

А вот некоторая разметка для тестирования (она может не совпадать с вашей, но я думаю, что она достаточно похожа): 

<html>
<head>
<title>menu stuff</title>
<style type="text/css ">
  /* minimal css */
  #menus ul, .menu-type {float: left;width: 10em;}
</style>
</head>

<body>
<h1>Menus</h1>
<div id="menus">
  <div class="menu-type">
    Numeric
    <ul style="display: none;">
      <li>1</li><li>2</li><li>3</li><li>4</li>
    </ul>
  </div>
  <div class="menu-type">
    Alpha
    <ul style="display: none;">
      <li>a</li><li>b</li><li>c</li><li>d</li>
    </ul>
  </div>
  <div class="menu-type">
    Roman
    <ul style="display: none;">
      <li>I</li><li>II</li><li>III</li><li>IV</li>
    </ul>
  </div>
</div>
</body>
</html>

Голос Йоды: "Включите prototype.js, я забыл."

Если вы хотите избавиться от встроенного стиля (как я), присвойте ul s класс, подобный 

.hidden {display:none;}

вместо этого и заставить функцию DropDownMenu.menuToggle сделать это 

if (menu) {Element.toggleClassName(menu, 'hidden');}

вместо прямого переключения свойства отображения.

Надеюсь, это поможет.

0 голосов
/ 15 марта 2010

Первоначально установите для дисплея значение «Нет», а затем отобразите их при необходимости. Это избавит от мигания.

...