Jquery .animate（）或.click（）函数在firefox中不起作用

我有一个

fullScreen（）

函数，通过将div的CSS left属性设置为0或-100%，目前可以在Chrome和microsoftedge上运行。以下是jQuery：

var fullScreen = function() {
    $('#fullscreenbutton').click(function() {
        $('.dashboard').animate({
            left: "-100%" 
        }, 200);
    });
    $('#hamburgerbutton').click(function() {
        $('.dashboard').animate({
            left: "0" 
        }, 200);
    });
}

HTML:

<div class="wrapper">
    <div class="dashboard">
        <div class="navtools">
            <ul>
                <li id="searchli">
                    <div class="input-group">
                      <span class="input-group-addon" id="basic-addon1"><span class=" glyphicon glyphicon-search" aria-hidden="true" style="font-size: 22px;"></span></span>
                      <input type="text" class="form-control" placeholder="Search..." aria-describedby="basic-addon1">
                    </div>
                </li>
                <li id="findmebutton"><span class=" glyphicon glyphicon-globe" aria-hidden="true" style="font-size: 22px;"></span> <p>Find Me</p></li>
                <li><span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size: 22px;"></span> <p>Favorite</p></li>
                <li><span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true" style="font-size: 22px;"></span> <%= link_to ' Back ', root_path, :class => 'none' %> </li>
                <li id="fullscreenbutton"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true" style="font-size: 22px;color: #2A83C6"></span> <p>Full Screen</p></li>
            </ul>
        </div>
    </div>
    <div id='myMap' oncontextmenu="return false">
        <div class="hamburgerbutton">
            <span class="glyphicon glyphicon-menu-hamburger" id="hamburgerbutton" aria-hidden="true" style="font-size: 50px;"></span>
        </div>
        <div class="alert alert-info">
          <a href="#" class="close" style="padding-left: 10px" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Hey!</strong> Right-click or hold to add a location.
        </div>
    </div>
</div>

找到我

最爱

'无'>
全屏


嘿右键单击或按住可添加位置。

---

有什么建议或指向正确的方向吗

不要在函数调用中绑定它，而是在Dom就绪块中进行绑定，它可以简化为：

 $(function (){
      $('#fullscreenbutton, #hamburgerbutton').click(function (){           
           $('.dashboard').animate({
                  left: this.id === 'fullscreenbutton' ? "-100%" : "0"
            }, 200);
      });
  });

---

谁在打全屏电话？对不起，阿伦，我被这个问题弄糊涂了。当任何用户单击“#fullScreen Button”（这只是一个li项目）时，都会调用全屏。单击li项时，绝对位于Bing地图上方的.dashboard div将向左移动-100%（在chrome和IE上）离开屏幕。然后，为了将仪表板拉回到屏幕上，一个用户单击了“汉堡按钮”，我相信这只是我放在Bing地图左上方的div绝对位置的一个图像。我已经在原始问题中包含了HTML。谢谢Jai！这似乎奏效了。你能解释为什么这与我创建的函数不同或更好吗？与我的解决方案相比，我想更好地理解为什么这样做。@alecs36任何人都不应该在函数调用中绑定事件。它所做的是在调用该函数时绑定新事件。这与类似的情况相同，您将绑定放在一个函数中，并在DOM就绪事件中调用该函数。因此，与其反过来做，不如在dom就绪块中完成。