12

我正在尝试使用引导程序制作一个新的 wordpress 模板。下拉菜单无法正常工作。第二次单击后，它会显示：无。我试图弄清楚，但我做不到！这是我的网站地址：查看有子菜单的服务

这也是我的代码：

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

7 回答 7

6

问题是，当下拉菜单切换回来时，style="display: none;"附加到<li id="menu-item-286">. 我不认为你的代码有什么问题，而是考虑到其他 JS 的数量，可能存在冲突。

我尝试删除“mootools.js”，问题已解决。

于 2013-08-12T12:27:20.593 回答
4

更好的解决方案是在您的页面上添加一小段 Javascript。

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

您可以放置​​“deeper.dropdown”而不是“deeper”。这是一个更干净的解决方案，因为： - 您不必删除 Mootools（我猜某些功能需要 Mootools 才能工作） - 您不必修改 Boostrap 代码（如果您更新 Bootstrap 脚本，您肯定会丢失修改）。

实际上，我在为某些插件加载 Mootools 的 Joomla 3 中遇到了同样的问题，我在模板中添加了这段代码。

希望这可以帮助。

于 2014-07-21T22:13:14.900 回答
4

在我的例子中，prototype.js 与 bootstrap.js 和 jquery.js 一起运行导致了问题。

这是对该问题的讨论：https ://github.com/twbs/bootstrap/issues/6921 。看起来它现在是一个“无法修复”的问题，如果你不想专门使用 jQuery，那么 Bootstrap 有一个 PrototypeJS 分支。

我最好的解决方案是应用 CSSdisplay:block !important;或inline-block根据您使用该元素的内容来覆盖display:none;Prototype 应用的元素。

我希望这会有所帮助

于 2015-05-27T20:35:51.777 回答
3

我更新了 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')
 })
}

这解决了问题

于 2014-03-11T06:01:09.910 回答
1

尝试这样做。

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

在 JavaScript 中

window.addEvent('domready',function() {    
    Element.prototype.hide = function() {
       $(function () { 
         $('#myTab li:eq(1) a').tab('show');
       });    
    };
});
于 2015-08-15T21:13:12.830 回答
1

您可能包含了 MooTools More 模块“Element.Shortcuts”（或者它是作为依赖项引入的）。当您单击 Bootstrap 导航选项卡时，它会调用 jquery.js 库中的 element.hide() 调用。由于 MooTools 已将“隐藏”方法添加到元素中，并且它设置了 display="none"，因此您的选项卡会消失。

我实现的修复是通过添加“MT”来更改 MooTools Element.implement 中的方法名称：

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

});

然后我在 MooTools More 这些方法中进行了搜索/替换并更新了名称。

我现在可以在不更改该代码的情况下使用 Bootstrap 选项卡导航，并且仍然可以使用新名称调用 MooTools 便捷快捷方式。

于 2016-03-30T22:32:13.720 回答
0

这是解决方案

只需转到prototype.js 并找到代码

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

并替换为

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

它对我有用..

于 2016-06-11T07:02:34.030 回答