How to stop the translator google dropdown from disappearing?

Question

I’m trying to implement the translator google dropdown, within a button. Now by clicking on the translator google dropdown, it does not show the countries/languages.

Here’s the code I’m currently using with bootstrap:

<div class="dropup" id="translaters">
    <button class="btn btn-default dropdown-toggle" style="background-color: #538b42; color: white;" type="button" data-toggle="dropdown">Translate
        <div class="dropdown-menu" id="google_translate_element"></div>
        <script>
            function googleTranslateElementInit() {
                new google.translate.TranslateElement(
                    {pageLanguage: 'en'},
                    'google_translate_element'
                );
            }
        </script>
    </button>
        <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Answer 1

It’s because the class dropdown-toggle of Bootstrap will close the dropdown every click in or out of it.

To get around this, add a Event Handler jQuery in the Google Translator menu with the method stopPropagation(), which will prevent the closure of dropdown by clicking on the Google Translate Menu:

$("#google_translate_element").click(function(e){
   e.stopPropagation();
});

Demo at Jsfiddle