问题是正如标题中所述,单击用锚标签包裹的图像不起作用。
这是网格列表项的示例:
<li class="grid-list-item">
<h3 class="grid-trail-name">Marshall Canyon</h3><span class="grid-loc">Mt Baldy, California</span>
<div class="grid-overlay">
<span class="grid-close">close</span>
<div class="grid-trail">
<div class="open">
<div class="info-flex info">
<div class="info-sum info-flex-child">
<h3 class="info-sum-header">Marshall Canyon...</h3>
<p class="info-sum-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. </p>
</div>
<div class="info-map info-flex-child">
<a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/map/20150714/0000154499_big_english.jpg?q=1461036407851" data-item="map_img" data-src="http://www.ramblr.com/media/photo/map/20150720/0000158962_big_english.jpg" class="map"> </a>
</div>
<div class="info-graph info-flex-child">
<a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/chart/20150714/0000154499_1_english.jpg?q=1461036467654" data-item="chart_img" data-src="http://www.ramblr.com/media/photo/chart/20150720/0000158962_1_english.jpg" class="graph"></a>
</div>
<div class="info-pic-section info-flex-child">
<img src="images/marshall.jpg" alt="" class="info-pic">
</div>
</div><!-- GRID INFO -->
</div><!-- OPEN -->
</div><!-- GRID TRAIL -->
</div><!-- GRID OVERLAY -->
</li><!-- GRID ITEM -->
在用户单击网格项目之前,网格覆盖将保持隐藏状态。单击后,将显示信息部分。在信息部分中,有一个地图和图形,一旦单击它们,应打开一个新的锚标记。
我的猜测是,我用来实现这种效果的脚本是导致问题boxgrid.js的原因。查找GitHub的回购这里,该网站高达浪涌这里。
问题在于<div class="grid-overlay">
内容在DOM中的位置。当前,其中有12个,每个列表项中有1个。您需要这些叠加层才能位于列表项之外。
查看以下gif。
我单击开始列表项之一,然后出现叠加层。与往常一样,单击地图锚不起作用。然后,我将<div class="grid-overlay">
DOM拖到其列表项之外,然后将其放到前面</body>
。现在,样式有些混乱(需要应用背景颜色),但要点是地图锚点链接现在可以工作了。
一种解决方案是将所有<div class="grid-overlay">
元素移到最前面,</body>
并在每个元素上添加一个data属性,将其与远足目的地相关联。例如:
<div class="grid-overlay" data-belongs-to="Potato Mountain">
然后,您可以将此目的地与单击的列表项相关联:
<li class="grid-list-item" data-location="Potato Mountain">
在这一点上,您必须将原始脚本弄得有些混乱。您想要更改:
$overlay = $item.children( 'div.grid-overlay' )
因为<div class="grid-overlay">
元素将不再作为每个元素中的子元素驻留$item
。
祝你好运!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句