隐藏下拉菜单而不使其与原型一起闪烁

发布于 2024-08-25 08:14:06 字数 1000 浏览 4 评论 0原文

我有许多下拉菜单和 div，它们在页面加载时隐藏，并且可以通过单击或鼠标悬停进行切换，但其中一些会闪烁，因为 JavaScript 无法及时运行。我将它们的显示最初设置为阻止，然后使用 JavaScript/原型来查找该元素并将其隐藏。我尝试使用 dom:loaded 加载这些“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 或下拉菜单以避免这种闪烁？

原文

I have a number of dropdowns and divs that are hidden when the page loads and can be toggled with a click or mouseover, but some of them flash b/c the JavaScript does not run in time. I have their display initially set to block and then I use JavaScript/prototype to find the element and hide it. I have tried loading these "hider" functions using dom:loaded but there is still flashing. This is an example of a dropdown prototype initialization function. From
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);
        }
      }
    });
  }
};

Is there a better way to hide div's or dropdowns to avoid this flashing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很快妥协 2024-09-01 08:14:06

当您尝试在页面加载后隐藏元素时，总是会面临闪烁的风险。
我建议您为相关元素提供内联样式，例如 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，我忘了。”

如果你想摆脱内联样式（就像我一样），请给出ulsa 类类似

.hidden {display:none;}

，并让 DropDownMenu.menuToggle 函数执行此操作

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

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

希望这有帮助。

You always run the risk of flicker when you try to hide elements after page load.
I suggest you give the elements in question an inline style like display:none; or a css class with the same setting.

From the class creation syntax used, I take it that you are using something like Prototype version 1.5.x. Here's my take on how I'd do it with that version (it would be nicer to step up to the latest version, of course):

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

And here is some markup to test it with (it may not match yours perfectly, but I think it is similar enough):

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

Yoda voice: "Include the prototype.js, I forgot."

Should you want to get rid of inline styling (like I do), give the uls a class like

.hidden {display:none;}

instead, and make the DropDownMenu.menuToggle function do this

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

instead of toggling the display property directly.

Hope this helps.

回复收藏 0 原文

安静 2024-09-01 08:14:06

最初将显示设置为无，然后根据需要显示它们。这样就可以消除闪烁了。

回复收藏 0 原文

~没有更多了~

关于作者

残龙傲雪

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

隐藏下拉菜单而不使其与原型一起闪烁

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

隐藏下拉菜单而不使其与原型一起闪烁

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。