jq menu 失效

jquery menu

qet093264 2017-05-03 12:50:16 ‧ 6252 瀏覽

分享至

以IIS7架站
套用在http://codepen.io/andyNroses/pen/AXwPkb 的一個MUNU
最初使用時測試、修改、放上網頁上都正常可用
可是在最近不知道為什麼
使用windowXP的電腦時
menu項目有新增出來但是卻無法開啟MENU
把JS中可拖動MENU的程式段取消註解的話
則會發生一樣不能開啟
但拖拉後則可以正常使用
一開始以為是有JS衝突到
但測試到最後用以下最初測試用的
發現也有同樣事情發生
想問這情形是什麼問題
HTML


<!DOCTYPE html>
<html>
<head>
    <title>Styled MapTypes</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-list.svg'>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRP0Fk7XeRiOAK9FvU5jru2zZLG-Io5g4&signed_in=true"></script>
    <script src='js/googleMap.js' charset="big5"></script>
    <style>
        /* 嵌入字型設定 */
        @font-face {
            font-family: "icon";
            src: url(Font/icon.ttf);
        }

        i {
            font-family: icon;
            font-style: normal;
            font-weight: normal;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            position: fixed;
            bottom: 0px;
            height: 70%;
        }
    </style>

</head>

<body>

    <div class="center menu" style="z-index:1;">
        <div id="myMenu"></div>
    </div>
    <div style="height:30%;">
        <i>A</i>
    </div>
    <div id="map"></div>
    <div style="height:30%;"></div>
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    <script src='https://code.jquery.com/ui/1.12.0/jquery-ui.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.js'></script>

    <script src="js/index.js"></script>
</body>
</html>

CSS

@import "https://fonts.googleapis.com/css?family=Open+Sans";

.fi-list{
width:2.5em;
height:2.5em;
background:url(../img/icom/icon0_.png);
background-size:cover;
}
.fi-icon1{
width:2.5em;
height:2.5em;
background:url(../img/icom/icon1_.png);
background-size:cover;
}
.fi-icon2 {
width:2.5em;
height:2.5em;
background:url(../img/icom/icon2_.png);
background-size:cover;
}
.fi-icon3{
width:2.5em;
height:2.5em;
background:url(../img/icom/icon3_.png);
background-size:cover;
}
.fi-icon4{
width:2.5em;
height:2.5em;
background:url(../img/icom/icon4_.png);
background-size:cover;
}
.fi-icon5{
width:2.5em;
height:2.5em;
background:url(../img/icom/icon5_.png);
background-size:cover;
}

.center {
  position: absolute;
  margin: 0 auto;
  right:0;
  left: 0;
}

.menu {
  position:fixed;
  width: 100%;
  max-width:1920px;
  height: 5%;
  max-height:1080px;
}

.title {
  width: 300px;
  height: 10px;
  top: 60px;
}

.item {
  position: absolute;
  right: 3%;
  bottom: -200%;
  width: 41px;
  height: 41px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  transition: opacity linear 0.5s;
}

i {
  display:block;
  width:40px;
  height:40px;
  font-size: 24px;
  color: #222222;
}

var timeOut;

class Item {
    constructor(icon, backgroundColor) {
        this.$element = $(document.createElement("div"));
        this.icon = icon;
        this.$element.addClass("item");
        this.$element.css("background-color", backgroundColor);
        var i = document.createElement("i");
        $(i).addClass("fi-" + icon);
        this.$element.append(i);
        this.prev = null;
        this.next = null;
        this.isMoving = false;
        var element = this;
        this.$element.on("mousemove", function() {
            clearTimeout(timeOut);
            timeOut = setTimeout(function() {
                if (element.next && element.isMoving) {
                    element.next.moveTo(element);
                } 
            }, 10);
        });
    }
    
    moveTo(item) {
        anime({
            targets: this.$element[0],
            left: item.$element.css("left"),
            top: item.$element.css("top"),
            duration: 700,
            elasticity: 500
        });
        if (this.next) {
            this.next.moveTo(item);
        }
    }

    updatePosition() {    
        anime({
            targets: this.$element[0],
            left: this.prev.$element.css("left"),
            top: this.prev.$element.css("top"),
            duration: 200
        });
        
        if (this.next) {
            this.next.updatePosition();
        }
    }
}

class Menu {
    constructor(menu) {
        this.$element = $(menu);
        this.size = 0;
        this.first = null;
        this.last = null;
        this.timeOut = null;
        this.hasMoved = false;
        this.status = "closed";
    }
    
    add(item) {
        var menu = this;
        if (this.first == null) {
            this.first = item;
            this.last = item;
            this.first.$element.on("mouseup", function() {
                if (menu.first.isMoving) {
                    menu.first.isMoving = false;        
                } else {
                    menu.click();
                }
            }); 
/*
            item.$element.draggable(
                {
                    start: function() {
                        menu.close();
                        item.isMoving = true;
                    }  
                },	
                {
                    drag: function() {
                        if (item.next) {
                            item.next.updatePosition();
                        }
                    }
                },
                {
                    stop: function() {
                        item.isMoving = false;
                        item.next.moveTo(item);
                    }
                }
            );
*/
        } else {
            this.last.next = item;
            item.prev = this.last;
            this.last = item;
        }
        this.$element.after(item.$element);
        
        
    }
    
    open() {
        this.status = "open";
        var current = this.first.next;
        var iterator = 1;
        var head = this.first;
        var sens = head.$element.css("top") < head.$element.css("bottom") ? 1 : -1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: head.$element.css("left"),
                top: parseInt(head.$element.css("top"), 10) + (sens * (iterator * 50)),
                duration: 500
            });
            iterator++;
            current = current.next;
        }    
    }
    
    close() {
        this.status = "closed";
        var current = this.first.next;
        var head = this.first;
        var iterator = 1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: head.$element.css("left"),
                top: head.$element.css("top"),
                duration: 500
            });
            iterator++;
            current = current.next;
        }
    }
    
    click() {
        if (this.status == "closed") {
            this.open();
        } else {
            this.close();
        }
    }
    
}

var menu = new Menu("#myMenu");
var item1 = new Item("list");
var item2 = new Item("icon1");
var item3 = new Item("icon2");
var item4 = new Item("icon3");
var item5 = new Item("icon4");
var item6 = new Item("icon5");
var item7 = new Item("icon6");


menu.add(item1);
menu.add(item2);
menu.add(item3);
menu.add(item4);
menu.add(item5);
menu.add(item6);
menu.add(item7);
$(document).delay(50).queue(function(next) {
    menu.open();
    next();
    $(document).delay(1000).queue(function(next) {
        menu.close();
        next();
    });
});