添加上點擊疊加，對現有元素

我有一個基於棘輪添加上點擊疊加，對現有元素

<div id="view1"> 

    <header class="bar bar-nav" id="header1"> 
     <h1 class="title">My Application</h1> 
    </header> 

    <div class="content" id="content1"> 

     <nav class="bar bar-tab" id="nav1"> 

      <a class="tab-item active" href="#" id="navitem1"> 
       <span class="icon icon-home"></span> 
       <span class="tab-label">Home</span> 
      </a> 

      <a class="tab-item " href="#" id="navitem2"> 
       <span class="icon icon-info"></span> 
       <span class="tab-label">About</span> 
      </a> 

     </nav> 

    </div> 

</div>

超基本佈局當用戶點擊一個元素（滿足某些條件，例如有的ID設置），覆蓋將被添加佔地僅這一個元素（不是一個完整的頁面之一，並沒有在所有搞亂佈局）

如果嵌套元素接收到單擊事件，則最先選擇最後面的元素，如果用戶再次單擊，則選擇滿足條件的下一個子元素。（意思是：如果用戶點擊頁面底部的一部分，view1是第一次拿起如果他再次點擊，這將是content1，然後nav1，等等...。）

這主要是一個實驗，但我仍然無法弄清楚。

我試過不同的解決方案（或插件，例如ContentHover），但都沒有工作。

任何想法？

UPDATE

最短我可以描述這個問題的辦法就是：我要複製的檢查器（Chrome/Safari瀏覽器），突出了不同元素的方式。

小提琴：http://jsfiddle.net/pta2mbcv/

來源

2014-10-20 Dr.Kameleon

目前還不清楚是什麼你想要的。 – Maysam 2014-10-20 12:43:51

@Maysam首先，我想創建一個覆蓋點擊元素（帶有「ID」設置）。可能讓你感到困惑的是停止事件傳播的問題，但現在並不重要 - 因爲我甚至無法繪製覆蓋圖。 – 2014-10-20 12:46:20

什麼元素？您的頁面上只有兩個按鈕。什麼樣的覆蓋？全屏或覆蓋元素？ – Tim 2014-10-20 12:47:19

jQuery的event.target應該爲你做它。 View documentation here.

這不是一個確定的答案，但我已經爲你編碼了一些東西，我們可以迭代它。此疊加層僅在單擊的元素具有ID時纔會顯示。

JSFidlle

覆蓋jQuery的

$(document).on('click', function (event) { 

    var target = $(event.target); 

    if(target.attr('id')) { 
     target.addClass('overlay'); 
    } 

});

覆蓋CSS

.overlay:before { 
    position: absolute; 
    content:''; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    background: rgba(5, 11, 37, 0.5); 
}

來源

2014-10-20 12:51:56 Tim

看看原始文章中的更新。 ;-) – 2014-10-20 12:58:35

這更接近你的意思嗎？我發現很難得到普遍的工作。我首先想到了用CSS樣式在div中添加clicked元素，但是這會使頁面變得更糟。目前使用僞元素，但這需要父元素具有相對定位。這個實施將會有多大？ – Tim 2014-10-20 13:38:33

非常感謝！你當然更接近。但仍有很多空間。這就是我想出的（基於你的片段）：http://jsfiddle.net/eju7hbdq/。它更接近，主要問題是：如果你點擊最外面的元素（例如內容），那麼你就完成了。你永遠不會再次訪問內部元素。嗯... – 2014-10-20 13:49:17

添加上點擊疊加，對現有元素

回答

相關問題