Jquery 旋转Div单击事件

当我单击旋转div的背面时，单击会传递到body标记内的下一个div，而不是注册到我实际单击的div上。有人知道这里发生了什么事以及如何解决吗

问题显而易见。 具体来说，它在Chrome中不起作用

如果您单击左侧菜单中的软件包，子菜单将从主菜单后面翻转出来，然后如果您尝试单击子菜单项，它将关闭菜单，因为浏览器认为您正在单击关闭菜单的非画布包装器。即使我从非画布包装器中删除jqueryclick事件，click事件仍然会通过这个翻转的div

---

谢谢你看这个

HTML:

Jquery：

/* card flip */
        $(document).ready(function() {

            $(".menu-main > li").hover(function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            }, function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            });

            //Main Menu Functions
            $(".menu-button").click(function(){
                $(".menu").toggleClass("menu-active");
                $(".menu-button").toggleClass("menu-button-menu-active");
            });

            //Menu Button Functions
            $("div.menu-button").hover(function(){
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            }, function() {
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            });

            //Sub Menu Functions
            $(".menu-item-packages").click(function(){
                $(this).addClass("menu-active-item");
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    //This function needs to increase the width of the menu wrapper in order for the submenu links to work.
                    $(".menu-wrapper").width(170);
                }
                else {
                    $(this).addClass("active");                        
                    $(".menu-wrapper").width(340);
                }
                //$(".card").offset({left: 0});
                $(".card").removeClass("flipped-reset");
                $(document).find(".card").toggleClass("flipped");
                $(".menu-button").toggleClass("menu-button-sub-menu-active");

            }); 

            //Sub Menu Hover
            $(".sub-menu > li").hover(function() {
                $(this).toggleClass("sub-menu-item-hover");
            }, function() {
                $(this).toggleClass("sub-menu-item-hover");
            });

            //Menu Close
            $(".inner-wrap").click(function(){
                $(document).find(".menu-active").removeClass("menu-active");
                $(".menu-button-menu-active").removeClass("menu-button-menu-active");
                $(".menu-button-sub-menu-active").removeClass("menu-button-sub-menu-active");
                if ($(document).find(".card").hasClass("flipped")) {
                    $(document).find(".card").removeClass("flipped");
                    $(document).find(".card").addClass("flipped-reset");
                }
                $(".menu-wrapper").width(170);
            });

        })

---

显示子菜单时，此css is样式处于启用状态

-webkit-backface-visibility: hidden;

注册翻转时更改为

-webkit-backface-visibility: visible;

这将适用于webkit浏览器，因此您需要为其他浏览器添加相应的样式

---

HTH

您能告诉我们您的HTML和jQuery是什么样子吗？如果没有这些，很难看出问题是什么。你可以提供一个实时链接，但需要帮助你的代码需要在你的问题中。顺便说一句，如果我单击软件包，然后尝试单击子菜单项，它工作得很好…我能够重定向到所有3个链接（页面不存在，但我被重定向）我忘了提到这发生在Chrome和Safari中。Firefox似乎是唯一一款可以使用的浏览器。谢谢你的关注，Craig。我甚至不知道它在Firefox中起作用！这只会使子菜单中列表项的左侧可单击。

-webkit-backface-visibility: hidden;

-webkit-backface-visibility: visible;