javascript - 使用谷歌翻译的自定义按钮

Question

如何使这个 Bootstrap 翻译按钮像谷歌翻译按钮一样工作？ https://jsfiddle.net/bobrierton/1hx1b5sr/

因此，当我创建的翻译按钮在按下时从谷歌按钮打开菜单。也许隐藏但以某种方式使用该功能？

<ul class="nav navbar-nav navbar-border-bottom navbar-right">
    <li class="">

        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
            <i class="search fa fa-language"></i> Translate
        </a>
    </li>
</ul>

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

您可以使用 opacity: 0 隐藏 Google 翻译按钮。不透明度不会删除按钮，因此即使它不可见，仍然可以单击它。您需要将自己的按钮放在不可见的 Google 翻译按钮后面，否则将无法点击(它被覆盖)。请注意 :hover 和 :focus 等对可见按钮不起作用，因为它被不可见按钮覆盖了。父级上的 position: relative; 是必需的，因为 position 始终指向下一个父级，该父级的属性 position 也设置为其他值比 static。

替换这一行:

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

用这些线

<div style="position: relative;">
   <div id="google_translate_element" style="position: relative; opacity: 0;"></div>
   <button style="position: absolute; left: 0; top: 0; z-index: -1;">Translate</button>
</div>