Responsive design 谷歌翻译小部件出现两次

我有一个响应网站，使用谷歌翻译小部件。奇怪的是，有一段时间小部件出现了两次，这似乎与响应设计有关，因为如果我将相同的小部件代码放在一个简单的html页面上，它只出现一次。我不知道如何解决这个问题。有人见过这个吗

更新

---

我发现这是由

jquery.themepunch.showbizpro.min.js

引起的，如果我删除了这个小部件，它只会出现一次。我还没有找到解决这个问题的方法，但可能有一种方法。我找到了这段代码

<script>
function googleTranslateElementInit() {
    new google.translate.TranslateElement(
        { pageLanguage: 'sv' },
        'google_translate_element'
    );

    /*
        To remove the "powered by google",
        uncomment one of the following code blocks.
        NB: This breaks Google's Attribution Requirements:
        https://developers.google.com/translate/v2/attribution#attribution-and-logos
    */

    // Native (but only works in browsers that support query selector)
    if(typeof(document.querySelector) == 'function') {
        document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
        document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
    }

    //If you have jQuery - works cross-browser - uncomment this
    jQuery('.goog-logo-link').css('display', 'none');
    jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>

函数googleTranslateElementInit（）{
新的google.translate.TranslateElement(
{pageLanguage:'sv'}，
“谷歌翻译元素”
);
/*
要删除“由谷歌提供动力”，
取消对以下代码块之一的注释。
注意：这违反了谷歌的归属要求：
https://developers.google.com/translate/v2/attribution#attribution-和标志
*/
//本机（但仅适用于支持查询选择器的浏览器）
if（typeof（document.querySelector）==“function”）{
document.querySelector（'.goog logo link'）.setAttribute（'style'，'display:none'）；
document.querySelector（'.goog te gadget'）.setAttribute（'style'，'font size:0'）；
}
//如果您有jQuery-works跨浏览器-取消对此的注释
jQuery（'.goog logo link'）.css（'display'，'none'）；
jQuery（'.googte gadget'）.css（'font-size'，'0'）；
}

---

这段代码删除了徽标，所以我想如果我使用javascript，我可以检查并删除重复出现的

，那么我只剩下一个了，这是可能的吗？

这发生在我使用引导时。我有两个谷歌翻译代码的实例——一个用于较大屏幕尺寸，另一个仅在较小屏幕上可见。无论屏幕大小如何，都会出现。像visible xs和hidden xs这样的引导类似乎不会影响Google Translate按钮的显示。

在RoR上也有同样的问题。使用TurboLink兑现页面所导致的问题。我用不推荐兑现所有链接的方法解决了这个问题（当脚本加载时，它会将attr“data turbolinks=“false”添加到body标签）

大家好！我也有同样的问题，我知道这不是最佳做法，但我用CSS修复了它，只添加了溢出：隐藏和右边框

---

它可以直观地解决问题，直到我们找到解决方案，并真正节省了进入JS文件的时间。希望它也适用于您。干杯！

您可以设置一个全局计数器，并确保只调用一次

<div id="google_translate_element"></div>

<script type="text/javascript">

    var duplicate_google_translate_counter = 0;//this stops google adding button multiple times

    function googleTranslateElementInit() {
       if (duplicate_google_translate_counter == 0) {
          new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
       }
       duplicate_google_translate_counter++;
    }

</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

var duplicate\u google\u translate\u counter=0；//这会多次停止google添加按钮
函数googleTranslateElementInit（）{
如果（重复的\u谷歌\u翻译\u计数器==0）{
新的google.translate.TranslateElement（{pageLanguage'en'}，'google_translate_element'）；
}
重复的谷歌翻译计数器++；
}

请提供一些代码。我发现这是由jquery.themepunch.showbizpro.min.js引起的，如果删除该代码，小部件只会出现一次。我还没有找到解决方法，但可能有一种方法……我找到了这段代码。。