Question

你能解释一下为什么只有第三个“复制链接”才能在所有面板关闭的情况下工作吗？我希望我的复制链接在面板中以及面板打开时也能正常工作。

这是我的页面： http://500milligrammes.com/facticemagazine/final/0/

这是我的代码：

<!DOCTYPE HTML>
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <style>
        .panel1,
        .panel2 {
            display: none;
            border: 1px solid #ccc;
            background-color: #eee
        }

        .flip1,
        .flip2 {
            border: 1px solid #ccc;
            background-color: #eee
        }

        #check,
        #check2 {
            visibility: hidden;
            width: 12px;
            height: 12px;
        }

        span#copy-callbacks,
        span#copy-callbacks2 {
            float: none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("span#copy-callbacks").zclip({
                path: "ZeroClipboard.swf",
                copy: $('#callback-paragraph').text(),
                beforeCopy: function() {
                    $('#copy-callbacks').css('background', 'none');
                },
                afterCopy: function() {
                    $('#copy-callbacks').css('background', 'none');
                }
            });

            document.getElementById("copy-callbacks").onclick = function() {
                document.getElementById("check").style.visibility = "visible";
            }
        });


        $(document).ready(function() {
            $('span#copy-callbacks').hover(
                function() {
                    $(this).css({
                        "color": "#e0ccb4"
                    });
                },

                function() {
                    $(this).css({
                        "color": "#000"
                    });
                }
            );




            $("span#copy-callbacks2").zclip({
                path: "ZeroClipboard.swf",
                copy: $('#callback-paragraph2').text(),
                beforeCopy: function() {
                    $('#copy-callbacks2').css('background', 'none');
                },
                afterCopy: function() {
                    $('#copy-callbacks2').css('background', 'none');
                }
            });

            document.getElementById("copy-callbacks2").onclick = function() {
                document.getElementById("check2").style.visibility = "visible";
            }
        });


        $(document).ready(function() {
            $('span#copy-callbacks2').hover(
                function() {
                    $(this).css({
                        "color": "#e0ccb4"
                    });
                },

                function() {
                    $(this).css({
                        "color": "#000"
                    });
                }
            );




            $(".flip1").click(function() {
                $(".panel1").slideToggle("fast");
            });

            $(".flip2").click(function() {
                $(".panel2").slideToggle("fast");
            });
        });
    </script>
</head>

<body>





    <div class="flip1">Click to slide the first panel down or up</div>
    <div class="panel1">

        when this panel is open, any copy link works !!!

    </div>





    <div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
    <div class="panel2">
        when a copy link is inside a panel, it doesn't work !!!
        <br/>
        <br/>

        <span id="copy-callbacks">Copy link&nbsp;&nbsp;<img  src="check.png" id="check" style="display: inline;"></span>
        <span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>

    </div>





    <div style="margin-top:150px; ">
        This one works perfectly when all panels are closed !!
        <br/>
        <span id="copy-callbacks2">Copy link&nbsp;&nbsp;<img  src="check.png" id="check2" style="display: inline;"></span>
        <span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
    </div>





    <script type="text/javascript" src="jquery.zclip.js"></script>
    <script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>

</html>

Answer 1

ZClip添加了一个绝对定位的flash（swf）对象，它附着在底部，当你的面板关闭时，zclip对象容器覆盖了第三个链接，你无法点击它。看到你更新的小提琴，我在zclip周围放了一个边框，你可以看到它正好在链接上： http://jsfiddle.net/4x3qctno/2/

当您打开面板时，它会向下推第三个链接，但zclip容器会保留在同一位置，因此您的链接会正常工作。

要解决此问题，请在CSS中更改zclip对象容器的z-index，如下所示：

.zclip{
    z-index:-1000!important;
}

显示：内联;不适用于复制链接

1 个答案: