bootstrap库和jQuery之间的一个奇怪的冲突

时间:2015-08-24 08:05:52

标签: jquery html twitter-bootstrap

请不要以为我在没有任何研究的情况下问这个问题。我已经做到了。 我的问题是,我正在使用bootstrap库来切换菜单幻灯片(手风琴切换),它实际上切换了<li>的下拉列表。 除此之外,我还使用我的自定义jquery <script>

这是我的代码:

<script>
$(document).ready(function() {

        $('#user-button').on('click',function(f){
            $('.dropdown').fadeToggle(200);
        });

        /*mobile menu*/
        var m_menu = $('#menu').clone();
        m_menu.addClass('m-menu');
        m_menu.prependTo('body');

        var m_menu_btn = $('<div id="m-menu-btn"><img src="images/mbtn.png"/></div>');
        m_menu_btn.prependTo('body');

        $('#m-menu-btn').on('click',function(){
            $(m_menu).slideToggle();
            $('#m-menu-btn img').animate({width: (this.tog ^= 1) ? 45 : 70 },400);
        });

})(jQuery);

</script>

上面的代码会将div添加到正文,这实际上是一个移动菜单。其次它会在点击时切换滑动,如代码中所示。

现在的问题是在引导程序库之后放置此代码之后,转换手风琴的引导程序库代码似乎不起作用。

请帮帮我..

1 个答案:

答案 0 :(得分:1)

感谢每个人投票......

非常感谢@Norlihazmey Ghazali的参与。

我设法解决了上述问题。 我做的是,我删除了引导库链接。 然后我在我的脚本中添加了一些代码行。 实际上每个<li>的手风琴菜单都有一个。panel类。所以我写道。

$('.panel').on('click',function()
    {
        if($(this).children('ul').is(':visible'))
        {
            $(this).children('ul').slideUp();
        }
        else
        {
            $('.panel').children('ul').slideUp();
            $(this).children('ul').slideToggle();
        }
    });