Question

我正在尝试将div添加到网站的主体，然后在用户使用jquery单击关闭按钮时将其向左滑动来隐藏它。该网站目前正在使用Drupal 7，出于这些目的，不可能直接编辑该文件。我正在使用Optimizely来应用它。

我还需要合并内联样式，除非有一种简单的方法来使用jquery设置所有这些样式。我知道，有一些荒谬的div，但它只适用于这个网站，这些类按此顺序应用。

我需要附加一串div，所以我现在正在这样做：

$("body").append("<div id=\"faceboxwrap\">
<div id=\"facebox\" style=\"height:500px; width:320px; z-index:99999; position:fixed; margin-left:0px; bottom:20px; background-image:url(..);\">
<div class=\"action-link field-name-field-fa-link\" style=\"float:left; margin-top:360px; padding-right: 10px; \">
<div class=\"field field-name-field-shared-splash-link field-type-link-field field-label-hidden\" style=\"width: 175px; margin-left: 103px; margin-right: auto; top: 38px; background-color: rgb(204, 51, 51); \">
<div class=\"field-items\">
<div class=\"field-item even\">
<a href=\"...\" id=\"trackDonate\" style=\"padding-right: 10px;\">DONATE $10</a>
</div></div></div>\n
<div style=\"text-align: center; width: 100%; color: rgb(121, 121, 121); font-size: 13px; margin-top: 60px; margin-left: 115px;\">
<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\"> No thanks </button>
</div></div></div></div>");

我对jquery的经验绝对没有，所以是否有一种简单的方法可以将此代码附加到我的页面的正文中，然后通过向左滑动来隐藏整个faceboxwrap div？我一直试图用我发现的每一个技巧超过四个小时这样做，我无法使它工作。任何帮助都会很棒。感谢。

编辑：更新了ID。

Answer 1

<script type="text/javascript">
    $(document).ready(function() {
        $("#closeButtonId").on("click", function() {
            $("#faceboxwrap").hide();
        });
    });
</script>

这可以解决您的问题。

hide和on方法文档。

编辑：由于按钮是使用div创建的，因此这是另一种可行的解决方案：

<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\" onclick=\"$('#faceboxwrap').hide();\">No thanks</button>

这是工作fiddle。

另一位工作fiddle。

现在一个fiddle可以完成你所需要的一切，将它隐藏在左边。您需要jQuery UI来实现这种行为。

如果你需要在DOM加载后创建的元素上绑定一个事件，我认为不可能在你的JS代码上没有突兀的情况下绑定该事件。我不是百分百肯定，但我认为不可能。

Answer 2

我不确定我是否理解这个问题，但你可以使用这样的animate函数将div滑动到左侧：

$("#faceboxwrap").animate({left: newLeft});

我认为你想要它离开屏幕，因为它是一个固定的位置你可以设置

newLeft = $("#faceboxwrap").width() * -1

jquery无法隐藏附加的div

2 个答案: