Question

当我点击rotateY'ed div的背面时，点击会传递到body标签内的下一个div，而不是在我实际点击的div上注册。有谁知道这里发生了什么以及如何解决它？

可以看到问题here。它在Chrome中无效。

如果单击左侧菜单中的Packages，子菜单将从主菜单后面翻转，然后如果您尝试单击子菜单项，它会关闭菜单，因为浏览器认为您是点击off-canvas-wrapper关闭菜单。即使我从off-canvas-wrapper中删除了jquery click事件，单击事件仍会通过此翻转的div。

感谢您查看此内容。

HTML：

    <div id="menu" class="menu">
        <img src="http://test.peoples1.com/wp-content/themes/JointsWP-master/library/images/menu-est-icon.png">
        <div class="menu-phone">
            <p>800-325-6598</p>
        </div>
        <ul class="menu-main">
            <li class=""><a href="/home">Home</a></li>
            <li class=""><a href="/about">About</a></li>
            <li class="menu-item-packages"><a href="#">Packages</a></li>
            <li class=""><a href="/quick-ownership">Quick<br>Ownership</a></li>
            <li><a href="/corporate-housing">Corporate<br>Housing</a></li>
            <li><a href="/home-staging">Home<br>Staging</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>

    <div class="menu-button">
        <a href="#" class="menu-button-icon"> </a>
        <a href="#" class="menu-button-text"> MENU</a>
    </div>

    <div class="card flipped-reset">
        <ul class="sub-menu menu-packages">
            <li><a href="/packages/economy">Economy</a></li>
            <li><a href="/packages/standard">Standard</a></li>
            <li><a href="/packages/executive">Executive</a></li>
        </ul>
    </div>

<div class="off-canvas-wrap" data-offcanvas="">

CSS：

.card {
    position: absolute;
    top: 0px;
    left: 0px;

    height: 100%;
    width: $menu-width;

    z-index: 9;
    background-color: $menu-sub-background;

    -ms-transform-origin: right;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -o-transform-style: preserve-3d;
    -o-transition: 0.8s;
    transform-style: preserve-3d;
    transition: 0.8s;

    -webkit-perspective: 500;
    -webkit-backface-visibility: hidden;

 }

.card:after {
    background-color: $menu-sub-background;
}

 .menu-packages { 
    height: 100%;
    width: 100%;
    margin: 0px;
    padding-top: 20em;

    background-color: $menu-sub-background;
    list-style-type: none;

    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

.flipped {
    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    perspective: 500px;
}

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);
            });

        })

Answer 1

显示子菜单时，此css样式已打开

-webkit-backface-visibility: hidden;

更改为注册翻页时

-webkit-backface-visibility: visible;

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

HTH

旋转Div单击事件

1 个答案: