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），但没有一个有效。

有什么想法吗？

更新

我能描述问题的最简单方法是：我想复制Inspector（Chrome / Safari）突出显示不同元素的方式。

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

Answer 1

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);
}

对于现有元素，单击添加叠加

1 个答案: