為現有元素在點擊時添加疊加

Question

• 我有一個基於Ratchet的超基礎布局

   <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組），覆蓋要添加覆蓋僅這一個元件 （不是一個完整的頁面之一，而根本不搞亂布局）

• 如果嵌套元素收到click事件，則將首先選擇最后一個元素，如果用戶再次單擊，則選擇滿足條件的下一個子元素。 （意思是：如果在頁面的底部，用戶點擊，在view1 ，拾取首先如果他再次點擊，這將是content1 ，然后nav1 ，等...）

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

我嘗試了不同的解決方案（或插件，例如ContentHover ），但沒有一個起作用。

有任何想法嗎？

---

UPDATE

我可以描述問題的最短方法是：我想復制檢查器（Chrome / Safari）突出顯示不同元素的方式。

---

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

Answer 1

jQuery的event.target應該為您完成。 在此處查看文檔。

這不是一個肯定的答案，但是我已經為您編寫了一些代碼，我們可以對其進行迭代。 僅當單擊的元素具有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);
}