Question

我有一个fullScreen()功能，目前可以在Chrome和Microsoft Edge上运行，方法是将div的CSS left属性操作为0或-100％。这是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>

任何建议或指向正确的方向？

Answer 1

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

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

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

1 个答案: