adding a class to an element after clicking a button doesn't work

Question

I have got a responsive joomla page with bootstrap. When I click on the button for the mobile menu (class="navbar-toggle") I would like to extend it and show the li-element (".item-259") wich contains a dropdown-menu already opened, by adding the class "open".

I don't know why this code isn't working, but the class "open" is not added to li.item-259, when I click on the button and it shows the menu...

Does anybody know whats wrong with it?

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

Edit: that is the html... thanks for your fast help

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

It is so weird... this also isn't working:

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

BUT this is working:

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

Problem with that is, that my submenu opens on every click on the document (everywhere) if it is not the mobile version...

Answer 1

jQuery(document).ready(function(){

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

});

or

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

Answer 2

First of all should the code stay between:

$(document).ready(function(){

});

Maybe the Element isn't described well as CSS selector, but without HTML code or similiar I can't say it exactly.