單擊我的網頁頂部角落會導致彈出框出現異常

我一直在使用彈出框來製作一個簡單頁面，該彈出框應該可以將一個彈出框擴展爲單擊頁面的大部分內容。但是，該頁面偶爾會使所有柔性盒的大小相等（請參見下圖）。當我點擊黃色或藍色部分的頁面角落時，我只會注意到它。有沒有人知道發生了什麼？單擊我的網頁頂部角落會導致彈出框出現異常

a picture of the issue

編輯：添加了相關的代碼，並刪除JS斌鏈接

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Home Page</title> 
    <link href="/stylesheets/flex.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <div id="yel" class="page selected"> 
     <h2>Home 
     </h2> 
    </div> 
    <div id="green" class="page"> 
     <h2>About Me 
     </h2> 
    </div> 
    <div id="red" class="page"> 
     <h2>Portfolio 
     </h2> 
    </div> 
    <div id="blue" class="page"> 
     <h2>Playground 
     </h2> 
    </div> 
    </body> 
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
html { 
    height: 100%; 
} 
body { 
    width: 100%; 
    height: 100%; 
    display: -webkit-flex; 
    -webkit-flex-flow: row; 
} 
.selected { 
    min-width: 90%; 
} 
#red { 
    background-color: #f00; 
} 
#yel { 
    background-color: #ff0; 
} 
#green { 
    background-color: #008000; 
} 
#blue { 
    background-color: #00f; 
} 
.page { 
    flex: 1; 
    min-width: auto; 
    min-height: 100%; 
    -webkit-transition-duration: 750ms; 
} 
.page h2 { 
    font: 20px Helvetica, Tahoma, sans-serif bold; 
    color: #ccc; 
    -webkit-transform: rotate(90deg); 
    margin: 5px; 
} 
.content { 
    margin: 10% auto auto auto; 
    padding: 10px; 
    width: 90%; 
    height: 50%; 
    border: 1px solid #000; 
}

var $ = function(sel, e) {return (e || document).querySelector(sel)}; 
var $$ = function(sel, e) {return (e || document).querySelectorAll(sel)}; 

var boxes = $$('.page'); 
var links = $$('.nav'); 
var flexTransitionTo = function flexTransitionTo(el) { 
    if(!el.classList.contains('selected')) { 
    $('.selected').classList.remove('selected'); 
    el.classList.add('selected'); 
    } 
}; 

for(var i = 0; i < boxes.length; i++) { 
    var el; 
    boxes[i].addEventListener('click', function(event) { 
    el = event.target; 
    flexTransitionTo(el); 
    }); 
} 

for(var i = 0; i < links.length; i++) { 
    var el; 
    var pageEl; 

    links[i].addEventListener('click', function(event) { 
    el = event.target; 
    pageEl = $(el.dataset.page); //should get the page I want 

    flexTransitionTo(pageEl); 
    }); 
}

來源

2013-07-18 H Khan

什麼瀏覽器和哪些版本？ –

@Andrew Marshall最新版本的Chrome（28）。我只使用JS Bin中的webkit前綴，因此只有Chrome才能正確顯示網頁。 –

無法重現（Chrome 28）。 – cimmanon

我可以告訴你爲什麼，但我不能給你修正（我的JavaScript-fu很弱）。問題在於，當你點擊h2元素（或者可能是頁面元素的任何其他後裔）時，它將攔截點擊事件，並且已經將選定的類應用於它。因爲選中的類已從所有頁面元素中刪除，所以它們都沒有設置爲選中。

來源

2013-07-18 17:53:01 cimmanon

單擊我的網頁頂部角落會導致彈出框出現異常

回答

相關問題