Question

问题就像它在标题中所说的那样，点击用锚标签包裹的图像不起作用。

以下是网格列表项的示例：

<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 repo here，该网站正在激增here。

Answer 1

问题在于<div class="grid-overlay">内容位于DOM中的位置。目前，其中有12个，每个列表项内有1个。您需要将这些叠加层置于列表项之外。

查看以下gif。

我点击其中一个起始列表项，然后出现叠加层。像往常一样，单击地图锚点不起作用。然后我将<div class="grid-overlay"> DOM拖到其列表项之外，然后将其放在</body>之前。现在样式有些混乱（需要应用背景颜色），但重点是地图锚点链接现在可以正常工作。

对此的一个解决方案是在<div class="grid-overlay">之前移动所有</body>元素，并在每个元素上添加数据属性，将其与远足目的地相关联。例如：

<div class="grid-overlay" data-belongs-to="Potato Mountain">

然后，您可以将此目的地与单击的列表项相关联：

<li class="grid-list-item" data-location="Potato Mountain">

此时，你必须稍微弄乱original script。你想改变：

$overlay = $item.children( 'div.grid-overlay' )

因为<div class="grid-overlay">元素不再作为子句驻留在每个$item内。

祝你好运！

我的锚标签不起作用。

1 个答案: