0

好吧，我得到了一个带有阅读更多内容的 jquery 代码... div 在循环中使用（wordpress 分类法）。唯一的问题是，每当我按下阅读更多...弹出的切换也会向下移动。

示例：http ://cloud0815.joloshop.com/shops/karstadt

如果您打开隐藏的 div（只需按：“mehr Infos zum Gutschein..”）并且将鼠标悬停在弹出信息下方的优惠券代码上，则未打开（如第一个蓝色代码框）而是切换向下移动约 40px .. ...

我又卡住了，对不起我的英语，我不是母语人士，因此德国网站......

谢谢

4

1 回答 1

0

我可以理解为什么这个问题会有点难以查明，但将来请尝试提供一些代码，或者至少提供详细说明问题的屏幕截图，以帮助其他人更好地了解您所面临的问题。

我认为问题在于您的文档结构。触发工具提示出现的<div>实际上并不在文档流中 - 它是绝对定位的。这意味着当您展开附加信息时，文档的其余部分会被移动，但绝对定位的触发器会<div>停留在最初的位置。因此，当您将鼠标悬停在优惠券代码上时，工具提示不再出现，而是出现在原来的位置 - 因为那是触发器<div>仍然所在的位置。

如何解决这个问题？好吧，您可以将触发器放在<div>结构中逻辑上应该存在的位置。我不确定触发元素是否是动态生成的，所以我无法给出确切的实现说明。但是，以下是工作结构的外观：

<div class="couponAndTip">
    <div class="link-holder">
        <div style="position: absolute; right: 0; top: 0; width: 93px; height: 100%; z-index: 99;">
            <embed id="ZeroClipboardMovie_2" src="http://cloud0815.joloshop.com/wp-content/themes/gutscheincloud/includes/js/zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="93" height="24" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=93&amp;height=24" wmode="transparent">
        </div>
        <a href="http://cloud0815.joloshop.com/go/karstadt-20prozent-rabatt-3/15381" id="coupon-link-15381" class="coupon-code-link" title="Code kopieren &amp; Shop öffnen " target="_blank">
            <span class="">bad20</span>
        </a>
    </div> <!-- #link-holder -->
    <p class="link-popup" style="display: none;">
        <span>Code kopieren &amp; Shop öffnen </span>
    </p>
</div>

（此代码是从其中一个优惠券代码元素中复制而来，并进行了修改以包含触发器<div>）。<div>绝对定位（及其内容）是工具提示的触发器，我将其添加到我复制的 HTML 中。您还需要此 CSS 样式以使其正常工作：

.link-holder{
    position:relative;
}

就是这样。一些 CSS 和一些结构的重新排列。但是，我确实注意到，对于每个触发器，宽度属性都是不同的，并且是通过内联 CSS 样式设置的。这表明动态生成，这意味着可能有一些 JavaScript 需要更改。（另一方面，如果它们都只是硬编码，那么重新排列它们的任务要简单得多。）

我希望这就是你要找的！如果没有，请告诉我，我很乐意提供进一步的帮助。祝你好运！

于 2013-07-22T17:39:27.083 回答