2

Estou a tentar implementar o dropdown do google tradutor, dentro de um botão. Agora ao clicar no dropdown do google tradutor, não mostra os países/línguas.

Aqui está o código que estou a utilizar de momento com 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>

1 Resposta 1

0

É porque a classe dropdown-toggle do Bootstrap irá fechar o dropdown a cada clique dentro ou fora dele.

Para contornar isso, adicione um event handler jQuery no menu do Google Tradutor com o método stopPropagation(), que irá impedir o fechamento do dropdown ao clicar no Menu do Google Tradutor:

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

Demo no JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .