Nascondere un menu a discesa senza lampeggiare con il prototipo

StackOverflow https://stackoverflow.com/questions/2447069

Domanda

Ho un numero di elenchi a discesa e tabelle, che sono nascosti quando la pagina si carica e può essere attivata con un semplice clic o mouseover, ma alcuni di loro flash, b, c, JavaScript non viene eseguito in tempo.Ho il loro display impostato per bloccare e quindi è possibile utilizzare JavaScript/prototipo per trovare l'elemento e nascondere.Ho provato il caricamento di questi "agguato" funzioni utilizzando dom:caricato, ma c'è ancora lampeggiante.Questo è un esempio di un menu a tendina prototipo di una funzione di inizializzazione.Da 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);
        }
      }
    });
  }
};

C'è un modo migliore per nascondere il div o menu a discesa per evitare il lampeggio?

È stato utile?

Soluzione

Si corre sempre il rischio di sfarfallio quando si tenta di nascondere elementi dopo il caricamento della pagina.Vi suggerisco di dare gli elementi in questione uno stile in linea come display:none; o una classe css con la stessa impostazione.

Dalla creazione della classe sintassi utilizzata, ritengo che si sta utilizzando qualcosa come Prototipo della versione 1.5.x.Ecco il mio prendere su come mi piacerebbe farlo con la versione (sarebbe bello, a passo fino alla ultima versione, ovviamente):

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

E qui ci sono alcuni di markup per la prova (che potrebbe non corrispondere il vostro perfettamente, ma penso che sia abbastanza simile):

<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 voce: "Sono i prototype.js mi sono dimenticato."

Se si vuole sbarazzarsi di inline styling (come faccio io), dare il uls una classe come

.hidden {display:none;}

invece, e rendere il DropDownMenu.menuToggle la funzione di questo

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

invece di attivare il display direttamente la proprietà.

Spero che questo aiuta.

Altri suggerimenti

Impostare il display inizialmente a nessuno, e poi mostrare loro come necessario.Che sbarazzarsi di lampeggiare.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top