Question

以下js代码在我的localhost上按预期工作，但在codepen / jsfiddle上没有。

这是codepen。代码应该显示菜单图标点击下拉菜单。并在关闭按钮时隐藏它。

JS

/** menu drop down */
document.addEventListener('DOMContentLoaded', function() {
    cntrls = document.querySelectorAll('.menu.dropdown a, span[class$="menu-pop-up-closer"]');
    [].forEach.call(cntrls, function(e) {
        e.addEventListener('click', function(t) {
            t.preventDefault();
            this.classList.toggle("open");
            document.getElementById("menu-pop-up").classList.toggle("open");
            return false;
        },  false);
    });
});

HTML

<div class="pageBox">
    <header>
        <div class="menu-wrapper">
            <dl id="menu">
                <dt class="menu dropdown"><a href="">Lore</a></dt>
                <dd class="menu-box">
                </dd>
                <dt class="home-url">
                <a href="http://increpo.serveo.net/">Lorem ipsum dolor sit </a>
                <a class="call-us" href="tel:+1(999)999-999"><img width="23" alt="Lorem ipsum dolor sit " src="http://increpo.serveo.net/skin/frontend/rwd/mobile/images/header-phone.png"></a>
            </dt>
                <dd></dd>
            </dl>
        </div>
    </header>
    <div id="menu-pop-up">
        <div class="menu-pop-up-closer-hldr">
            <span class="menu-pop-up-closer">&#10005;</span>
        </div>
        <div class="menu-pop-up-list">
            <ul>
                <li class="menu-pop-up-home-li"><a href="#" title="Lore">Lore</a>
                </li>
                <li>
                    <ul>
                        <li><a href="#" title="Lorem">Lorem</a>
                        </li>
                        <li><a href="#" title="Lorem ">Lorem </a>
                        </li>
                        <li><a href="#" title="Lorem ">Lorem </a>
                        </li>
                        <li><a href="#" title="FAQ">FAQ</a>
                        </li>
                        <li><a href="#" title="Lorem ipsum dolo">Lorem ipsum dolo</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#" title="Lore">Lore</a>
                </li>
            </ul>
        </div>
    </div>
</div>

＆＃34;代码应显示菜单图标点击下拉菜单。然后在关闭按钮上隐藏它。＆＃34;

代码在现场工作，但不在codepen / jsfiddle上

0 个答案: