jquery - 链接和 Div 脚本同时运行 HTML/JSF/JQuery

Question

我正在做一个元素，它要求我有一个 div，其中包含一些要编辑的元素，还有另一个 div，它始终不显示。代码如下所示:

<div id="div1">
    <h:outputText value="Fixed Div" />
    <h:outputLink id="openDiv">Open Div</h:outputLink>
    <div id="currentlyUnused">TODO</div>
</div>

<div id="div2">
    <h:outputText value="Other Div" />
    <div id="currentlyUnused2">TODO</div>
</div>

两个 div 的一些额外的 CSS:

width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
background-color: white;

同时为 div2 添加:

z-index: 10;
display: none;

因此，我尝试的是在单击 div1 中的链接时打开 div2。我已经通过使用 JQuery 脚本发生过这种情况。脚本如下所示:

<script>
    $("#openDiv").click(function() {
        $("#div2").show( "slow" );
        $("#div1").animate({
            'marginLeft' : "-=30px"
        });
        $("#div1").animate({
            'marginTop' : "-=20px"
        });
    });
</script>

<script>
    $("#div1").click(function() {
        $("#div2").hide( "slow" );
        $("#div1").animate({
            'marginLeft' : "+=30px"
        });
        $("#div1").animate({
            'marginTop' : "+=20px"
        });
    });
</script>

关闭div2的类似，只是div2会在点击div1(突出在一侧)时关闭.它们周围有边界，所以我可以准确地看到它们如何移动等，但它只是样式相关，以及 div2 上的 z-index(使其重叠等)

关于手头的问题。由于 div 是动画的，我注意到屏幕上的移动，并且我知道我希望 div 如何移动。当 div2 在屏幕中间弹出时，div1 将向上移动 20px，向左移动 30px。当 div2 关闭时，div1 将向下移动 20px，向右移动 30px(到它的原始位置)

我注意到当我点击链接打开 div2 时，会发生以下步骤:

1. div1 向左移动 30px
2. div1 向上移动 20px
3. div2 短暂打开
4. div2 关闭
5. div1 向右移动 30px
6. div1 向下移动 20px

这让我相信单击链接时这两个脚本都在运行。我能想到的唯一可能原因是点击脚本 - 链接和 div 上的同时触发。

我一直坐下来尝试不同的组合来解决这个问题。我也尝试过使用 pointer-events 来尝试解决问题，但到目前为止无济于事。

任何建议或帮助将不胜感激

Answer 1

问题是按钮在表单中并且都有一个 jquery oncklick。 查询将按钮上的点击保留为对 div1 的点击。

要解决此问题(event.stoppropagation):https://api.jquery.com/event.stoppropagation/

<script>
    $("#openDiv").click(function( event ) {
        //Prevent click flowing into div1
        event.stopPropagation();
        $("#div2").show( "slow" );
        $("#div1").animate({
            'marginLeft' : "-=30px"
        });
        $("#div1").animate({
            'marginTop' : "-=20px"
        });
    });
</script>