添加上点击叠加，对现有元素

我有一个基于棘轮添加上点击叠加，对现有元素

<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

添加上点击叠加，对现有元素

回答

相关问题