Javascript 字体可怕+；引导工具栏动画问题

我正在通过Kolor Panotour Pro（使用基于xml的代码“krpano”）构建一个360度的旅行

当我导出我的项目时，我使用了一个引导html模板构建，这样它就有了漂亮的ui按钮

使用与IE不兼容的工具栏图标的默认引导模板

从那以后，我改用了令人敬畏的字体，现在除了一个问题外，它表现得非常好

下面是工具栏的图像。。。

当您点击此切换按钮获取缩略图时，从底部弹出一行缩略图。下图。

问题是，黑色工具栏应该在拇指的上方向上移动

当使用glyphicons的原始模板存在时，问题不会发生。但只要我将“拇指切换”按钮更改为“眼睛”字体，工具栏就不会移动。我知道我错过了一些行动电话，但我到处都找遍了，却找不到

这是我正在看的一些代码

眼钮

<button     type="button"
                                class="btn btn-default btn-lg toggle-thumbnails"
                                data-toggle="tooltip"
                                data-placement="top"
                                title="Toggle thumbnails">
                                <i class="fa fa-eye" style="color: white;"></i>
                    </button>

---

看看代码，当您使用Glyphicons时，标签似乎是

，现在它是

，按照Fontsome的说明

此选择器在搜索

时找不到任何内容

jQuery（“切换缩略图范围”）

用这个

if（jQuery（“.toggle thumbnails i”）.hasClass（'fa-eye'）{

您还需要将另一个

span

s更改为

i

s

var toggleThumbnails = function(){
    jQuery('#thumbnailsDIV').toggle("slow", function() {
        if(jQuery(".toggle-thumbnails i").hasClass('fa-eye')) {
            jQuery(".toggle-thumbnails i").removeClass('fa-eye').toggleClass('fa-eye-slash');
            jQuery('#toolbar').animate({bottom:'175px'});
            jQuery('.toggle-thumbnails i').css({color: fg2xLighter});
        }else{
            jQuery(".toggle-thumbnails i").removeClass('fa-eye-slash').toggleClass('fa-eye');
            jQuery('#toolbar').animate({bottom:'50px'});
            jQuery('.toggle-thumbnails i').css({color: '#{{project.description.fgcolor}}'});
        }
    });
};

但我会减少DOM搜索并将其整理为：

var toggleThumbnails = function(){
    jQuery('#thumbnailsDIV').toggle("slow", function() {

        var $icon = jQuery('.toggle-thumbnails i'); // find once and re-use 
        var color; // alter this and make one call to update $icon later
        var bottom; // to remove duplicate code

        if ($icon.hasClass('fa-eye')) {
            bottom = 175;
            color = fg2xLighter;
        }else{
            bottom = 50;
            color = '#{{project.description.fgcolor}}';
        }

        // update the icon and toolbar
        jQuery('#toolbar').animate({bottom: bottom}); // doesn't need 'px'
        $icon.toggleClass('fa-eye fa-eye-slash').css({color: color});
    });
};

---

在任何情况下，不要使用

.removeClass（'fa-eye'）.toggleClass（'fa-eye-slash'）

而使用

.toggleClass（'fa-eye-fa-eye-slash'）

谢谢！这肯定会清理一点。这是模板中的默认设置。希望我能解决工具栏问题！：我发现了它，所以我希望你不要花太长时间来检查这里编辑中的给定URL在Chrome和FirefoxWow中工作正常，这肯定会清理掉那里的部分，不是吗？这肯定有帮助，尽管如此呃，工具栏问题仍然存在，嗯…眼睛图标也不会在眼睛和眼睛斜线之间切换（在更改之前也不会切换）…我将完整发布代码。（我将编辑我的帖子。）再次感谢！嘿，老兄！！！以防万一…我用了不太整洁的旧DOM，并更改了“span”的内容，它很有效。不确定旧版本和较短版本之间有什么区别（我不太熟悉代码），但无论如何，你肯定帮了我解决了这个问题。你就是那个男人/女人！！：）旧版本，所有的

span

s都被

i

s替换了，应该也能工作。不，是的，这就是我的意思。原来的jQuery加上了额外的.removeClass和.toggleClass，可以和'i'一起工作，但出于某种原因，简化后的代码没有工作不行！不知道！

var toggleThumbnails = function(){
    jQuery('#thumbnailsDIV').toggle("slow", function() {

        var $icon = jQuery('.toggle-thumbnails i'); // find once and re-use 
        var color; // alter this and make one call to update $icon later
        var bottom; // to remove duplicate code

        if ($icon.hasClass('fa-eye')) {
            bottom = 175;
            color = fg2xLighter;
        }else{
            bottom = 50;
            color = '#{{project.description.fgcolor}}';
        }

        // update the icon and toolbar
        jQuery('#toolbar').animate({bottom: bottom}); // doesn't need 'px'
        $icon.toggleClass('fa-eye fa-eye-slash').css({color: color});
    });
};