jQuery Rain“动画菜单图标”onclick不起作用答案

【问题标题】：jQuery Rain "Animated Menu Icon" onclick not workingjQuery Rain“动画菜单图标”onclick不起作用
【发布时间】：2017-05-30 07:19:04
【问题描述】：

我使用JQuery Rain 创建动画菜单，但我无法在菜单项中添加 onclick。这是菜单按钮和子菜单项的美丽效果，

我想添加 onclick="alert(1);"在子菜单之一上，但显然父节点阻止点击子菜单。

我尝试更改一些 CSS 以访问子菜单，但我没有看到任何变化。

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animated Menu Icon</title>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedMenuIcon/css/component.css" />
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="https://tympanus.net/Tutorials/AnimatedMenuIcon/js/segment.min.js"></script>
    <script src="https://tympanus.net/Tutorials/AnimatedMenuIcon/js/ease.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="content">
                <div class="device__screen">
                    <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
                        <svg width="1000px" height="1000px">
                        <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
                        <path id="pathB" d="M 300 500 L 700 500"></path>
                        <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
                        </svg>
                        <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
                    </div><!-- menu-icon-wrapper -->

                </div><!-- /device-content -->
        </div><!-- /content -->
    </div><!-- /container -->
    <div id="dummy" class="dummy">
        <div class="dummy__item" onclick="alert(1);">Click me</div>
        <div class="dummy__item"></div>
        <div class="dummy__item"></div>
        <div class="dummy__item"></div>
    </div><!-- /dummy -->
    <script src="js/main.js"></script>
</body>

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

不确定，但如果你想看到你的子菜单删除：

-webkit-transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1);
transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1);

在https://tympanus.net/Tutorials/AnimatedMenuIcon/css/demo.css 它出现了

【讨论】：