单击按钮后向元素添加类不起作用答案

【问题标题】：adding a class to an element after clicking a button doesn't work单击按钮后向元素添加类不起作用
【发布时间】：2015-09-02 14:34:25
【问题描述】：

我有一个带有引导程序的响应式 joomla 页面。当我单击移动菜单的按钮 (class="navbar-toggle") 时，我想扩展它并显示包含已打开下拉菜单的 li 元素 (".item-259")，方法是添加类“开放”。

我不知道为什么这段代码不起作用，但是当我单击按钮并显示菜单时，“open”类没有添加到 li.item-259...

有人知道这是怎么回事吗？

<script type="text/javascript"> 
    jQuery('.navbar-toggle').on('click',function(){
    jQuery('.item-259').addClass('open');
});
</script>

编辑：那是 html...感谢您的快速帮助

        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header">    <!-- =MOBILE -->

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hauptnavigation" aria-expanded="false">
                        <span class="sr-only">Hauptmenü ausklappen</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>


                    <a class="navbar-brand" title="zur Startseite" href="/index.php">                                          
                        <img class="logo" src="..." alt="Logo" />
                    </a>

                </div><!-- navbar-header -->

                <div class="collapse navbar-collapse" id="hauptnavigation">
                    <nav>
                        <jdoc:include type="modules" name="menu" />
                    </nav>  
                </div><!-- navbar-collapse -->

            </nav>
        </div><!-- container -->

太奇怪了……这也不行：

<script type="text/javascript"> 
    jQuery(document).ready(function(){
        jQuery('.navbar-toggle').on('click',function(){
        jQuery('.item-259').addClass('open');
        });
    }); 
</script>

但这是有效的：

<script type="text/javascript"> 
    jQuery(document).ready(function(){
        jQuery(document).on('click',function(){
        jQuery('.item-259').addClass('open');
        });
    }); 
</script>

问题在于，如果不是移动版本，我的子菜单会在每次点击文档时打开（无处不在）...

【问题讨论】：

你应该将代码包装在 DOM 中。
能否请您也发布相关的 HTML 标记。这将有很大帮助！
永远不要使用 [bootstrap] 作为标签，而是使用 [twitter-bootstrap]。尝试将鼠标悬停在标签上以获取更多信息。
这个非常普通的小提琴表明它有效。您可能需要检查其他内容。 jsfiddle.net/yongchuc/4n89xj41

标签： javascript jquery twitter-bootstrap joomla navbar

【解决方案1】：

jQuery(document).ready(function(){

jQuery('.navbar-toggle').on('click',function(){
    jQuery('.item-259').addClass('open');
    });

});

或

    jQuery('.navbar-toggle').live('click',function(){
        jQuery('.item-259').addClass('open');
    });

【讨论】：

【解决方案2】：

首先代码应该保持在：

$(document).ready(function(){

});

也许元素没有被描述为 CSS 选择器，但是没有 HTML 代码或类似的我不能准确地说出来。

【讨论】：