CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Hamidre13
Hamidre13

Reputation: 201

Bootstrap menu disappears after first click setting the ul style to none

I am trying to make a new wordpress template with bootstrap. The drop down menu does not function correctly. After the second click it gets display:none. I tried to figure it out but I could not! Here is my website address: check out the services that has submenu

Here is my code as well:

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

Upvotes: 12

Views: 10665

Answers (7)

rakesh37
rakesh37

Reputation: 21

here is solution

just go to prototype.js and find code 

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

and replace with 

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

its workging for me..

Upvotes: 0

XtopherSD
XtopherSD

Reputation: 343

You probably included the MooTools More module "Element.Shortcuts" (or it was pulled in as a dependency). When you click a Bootstrap navigation tab, it calls an element.hide() call in the jquery.js library. Since the "hide" method has been added to elements by MooTools, and it sets display="none", your tabs disappear.

The fix I implemented was do change the method names in MooTools Element.implement by adding "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);
    }

});

Then I did a search/replace in MooTools More these methods and updated the names.

I can now use Bootstrap tab navigation with no changes to that code and still call MooTools convenience shortcuts with the new names.

Upvotes: 1

Shiplu
Shiplu

Reputation: 516

Try it doing this.

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');
       });    
    };
});

Upvotes: 1

contrid
contrid

Reputation: 980

In my case it was prototype.js running alongside bootstrap.js and jquery.js that caused the problem.

Here is a discussion of the problem: https://github.com/twbs/bootstrap/issues/6921 . It seems like it is now a "Won't Fix" issue and that there is a PrototypeJS fork of Bootstrap if you don't want to use jQuery specifically.

My best solution was to apply CSS display:block !important; or inline-block depending on what you're using the element for to the element which will override the display:none; being applied by Prototype.

I hope that helps

Upvotes: 4

quokka-web
quokka-web

Reputation: 104

A better solution is to add a small piece of Javascript on your page.

if (MooTools != undefined) {
    var mHide = Element.prototype.hide;
    Element.implement({
        hide: function() {
                if (this.hasClass("deeper")) {
                    return this;
                }
                mHide.apply(this, arguments);
            }
    });
}

Instead of "deeper" you can put "deeper.dropdown". It is a cleaner solution because : - You don't have to remove Mootools (I guess that some functionalities need Mootools to work) - You don't have to modify the Boostrap code (If you update your Bootstrap script you surely loose your modification).

Actually I encountered the same problem with Joomla 3 which loads Mootools for some plugins and I added this code on my template.

Hope this helps.

Upvotes: 4

mohd sikander
mohd sikander

Reputation: 31

i have update bootstrap.js line number 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')
 })
}

This has fixed the problem

Upvotes: 3

rav
rav

Reputation: 753

the problem is, when the dropdown toggles back, style="display: none;" is appending to <li id="menu-item-286">. I don't think there's anything wrong with you code, rather given the amount of other JS, it is possible that there are conflicts.

I tried removing "mootools.js" and the problem is fixed.

Upvotes: 6

Related Questions