How to prevent the Google translator dropdown from disappearing?

Navigation
2

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

Here is 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>
    
asked by anonymous 13.03.2018 / 12:29

1 answer

0

This is because Bootstrap's dropdown-toggle class will close dropdown with each click inside or outside it.

To work around this, add a event handler jQuery in the Google Translate menu with the stopPropagation() method, which will prevent closing the dropdown when clicking on the Menu Google Translate: 

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

Demo on JSFiddle

    
13.03.2018 / 12:43
Android - Activity Destroyed When Rotating Tablet RGB Color in Visual Studio 2017?