Question

我有一些下拉菜单和div，它们在页面加载时隐藏，可以通过点击或鼠标悬停切换，但其中一些闪存b / c JavaScript没有及时运行。我的显示器最初设置为阻止，然后我使用JavaScript / prototype来查找元素并隐藏它。我已经尝试使用dom加载这些“hider”函数：加载但仍然闪烁。这是下拉原型初始化函数的示例。从 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或下拉以避免闪烁？

Answer 1

当您尝试在页面加载后隐藏元素时，始终存在闪烁的风险。我建议你给问题元素一个内联样式，如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提供类似

的类

.hidden {display:none;}

而是让DropDownMenu.menuToggle函数执行此操作

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

而不是直接切换显示属性。

希望这有帮助。

Answer 2

最初将显示设置为无，然后根据需要显示它们。这将摆脱闪烁。

隐藏下拉菜单，不用原型闪烁

2 个答案: