Il menu Bootstrap scompare dopo il primo clic impostando lo stile ul su none

Sto provando a creare un nuovo modello di wordpress con bootstrap. Il menu a discesa non funziona correttamente. Dopo il secondo clic viene visualizzato: nessuno. Ho provato a capirlo ma non potevo! ecco il mio indirizzo web: check out the services that has submenu Il menu Bootstrap scompare dopo il primo clic impostando lo stile ul su none

Ecco il mio codice così:

<li id="menu-item-286" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-286 dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"> 
      <a href="http://seoirvine.co/business-directories-irvine/" class="dropdown-toggle" data-toggle="dropdown">Business Directories</a> 
     </li> 
     <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"> 
      <a href="http://seoirvine.co/ppc-optimization-irvine/" class="dropdown-toggle" data-toggle="dropdown">PPC optimization</a> 
     </li> 
     <li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"> 
      <a href="http://seoirvine.co/press-release-and-blogs-irvine/" class="dropdown-toggle" data-toggle="dropdown">Press Release and Blogs</a> 
     </li> 
     <li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"> 
      <a href="http://seoirvine.co/seo-sem-irvine/" class="dropdown-toggle" data-toggle="dropdown">SEO &amp; SEM Irvine</a> 
     </li> 
     <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"> 
      <a href="http://seoirvine.co/social-media-marketing-irvine/" class="dropdown-toggle" data-toggle="dropdown">Social Media Marketing</a> 
     </li> 
     <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"> 
      <a href="http://seoirvine.co/video-irvine/" class="dropdown-toggle" data-toggle="dropdown">Video Blogging</a> 
     </li> 
    </ul> 
</li>

Grazie

fonte

2013-08-12 Hamidre13

Possibile duplicato di: http://stackoverflow.com/q/10863821/1256403 –

Mi sembra OK, il pulsante è toggli ng il display del menu che è ciò che è destinato a fare. – lharby

il problema è che, quando la discesa alterna indietro, style="display: none;" è aggiungendo a <li id="menu-item-286">. Non penso che ci sia qualcosa di sbagliato nel codice, piuttosto data la quantità di altri JS, è possibile che ci siano conflitti.

Ho provato a rimuovere "mootools.js" e il problema è stato risolto.

fonte

2013-08-12 12:27:20 rav

ho aggiornamento numero di riga bootstrap.js 777

function clearMenus() { 
$(backdrop).remove() 
$(toggle).each(function (e) { 
    var $parent = getParent($(this)) 
    if (!$parent.hasClass('open')) return 
    $parent.trigger(e = $.Event('bs.dropdown')) 
    if (e.isDefaultPrevented()) return 
    $parent.removeClass('open') 
}) 
}

Questo ha risolto il problema

fonte

2014-03-11 06:01:09

Ha lavorato alla grande grazie. Posso chiederti cosa c'è di sbagliato nel codice precedente? – jackdh

Solo per la cronaca, non è necessario modificare il file 'bootstrap.js' perché funzioni, basta aggiungerlo all'interno dei tag'

Provalo.

In HTML

<ul id="myTab" class="nav nav-tabs"> 
    <li class="active"><a href="#link1" data-toggle="tab">Link1</a></li> 
    <li><a href="#Link2" data-toggle="tab">Link1</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active" id="link1"> 
     LINK1 
    </div> 
    <div class="tab-pane fade" id="web_design"> 
     LINK2 
    </div> 
</div>

in JavaScript

window.addEvent('domready',function() {  
    Element.prototype.hide = function() { 
     $(function() { 
     $('#myTab li:eq(1) a').tab('show'); 
     });  
    }; 
});

fonte

2015-08-15 21:13:12 Shiplu

probabilmente è stato incluso il MooTools Più modulo "Element.Shortcuts" (o è stato tirato come una dipendenza).Quando fai clic su una scheda di navigazione Bootstrap, richiama una chiamata element.hide() nella libreria jquery.js. Poiché il metodo "nascondi" è stato aggiunto agli elementi da MooTools e imposta display = "none", le schede scompaiono.

La correzione ho implementato è stato cambiano i nomi dei metodi in MooTools Element.implement con l'aggiunta di "MT":

Element.implement({ 

    isDisplayedMT : function() { 
     return this.getStyle('display') != 'none'; 
    }, 

    isVisibleMT : function() { 
     var w = this.offsetWidth, h = this.offsetHeight; 
     return (w == 0 && h == 0) ? false : (w > 0 && h > 0) ? true : this.style.display != 'none'; 
    }, 

    toggleMT : function() { 
     return this[this.isDisplayedMT() ? 'hide' : 'show'](); 
    }, 

    hideMT : function() { 
     var d; 
     try { 
      // IE fails here if the element is not in the dom 
      d = this.getStyle('display'); 
     } catch (e) { 
     } 
     if (d == 'none') 
      return this; 
     return this.store('element:_originalDisplay', d || '').setStyle('display', 'none'); 
    }, 

    showMT : function(display) { 
     if (!display && this.isDisplayedMT()) 
      return this; 
     display = display || this.retrieve('element:_originalDisplay') || 'block'; 
     return this.setStyle('display', (display == 'none') ? 'block' : display); 
    }, 

    swapClassMT : function(remove, add) { 
     return this.removeClass(remove).addClass(add); 
    } 

});

Poi ho fatto una ricerca/sostituzione in MooTools Più questi metodi e aggiornati i nomi.

Ora posso utilizzare la navigazione della scheda Bootstrap senza modifiche a quel codice e comunque chiamo le scorciatoie di convenienza di MooTools con i nuovi nomi.

fonte

2016-03-30 22:32:13 XtopherSD

qui è la soluzione

basta andare a prototype.js e trovare il codice

hide: function(element) { 
element = $(element); 
element.style.display = 'none'; 
return element; },

e sostituirlo con

hide: function(element) { 
element = $(element); 
if(!isBootstrapEvent) 
{ 
    element.style.display = 'none'; 
} 
return element; },

sua workging per me ..

fonte

2016-06-11 07:02:34 rakesh37

Problemi correlati

Il menu Bootstrap scompare dopo il primo clic impostando lo stile ul su none

risposta

Problemi correlati