Question

我正在构建一些网站，我希望在http://www.strv.com上设置菜单（在打开和关闭时具有过渡效果）。

我已经完成了以下代码：

<div class="menu">
    <button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    </button>

    <button id="hamburger" class="btn pull-left">
        <span class="fa fa-bars"></span>
    </button>
    <ul class="list-inline nav-menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
    </ul>
</div>

<div id="mainmenu">
    <div class="container">
        <button type="button" class="close btn btn-default navbar-toggle">Close</button>
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Subitem1</a></li>
                <li><a href="#">Subitem2</a></li>
                <li><a href="#">Subitem3</a></li>
                <li><a href="#">Subitem4</a></li>
            </ul>
    </div>
</div>

JSFiddle：https://jsfiddle.net/eztuhvhL/ （不在那里工作而且不知道为什么），但关闭没有过渡效应，我无法解决。

我还要添加＆＃34; Item1，Item2，Item3＆＃34;移动屏幕上的这个菜单，我不知道如何弄明白。

谢谢。

Answer 1

你的问题是你有两个带有汉堡包的按钮，所以jquery不知道你想要哪一个。如果您在控制台上查看类似的chromes devtools，您会发现单击它时没有任何反应。解决方案是摆脱汉堡包的第一个实例。这是我得到的：

http://codepen.io/Squeakasaur/pen/mWKzer

<div class="menu">


            <button id="hamburger" class="btn pull-left">
                <span class="fa fa-bars"></span>
            </button>
            <ul class="list-inline nav-menu">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
            </ul>

        </div>

        <div id="mainmenu">
            <div class="container">
                <button type="button" class="close btn btn-default navbar-toggle">Close</button>
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Subitem1</a></li>
                    <li><a href="#">Subitem2</a></li>
                    <li><a href="#">Subitem3</a></li>
                    <li><a href="#">Subitem4</a></li>
                </ul>
            </div>


  </div>

那应该可以解决你的问题。您也可以将第一个实例的id更改为其他内容：P

导航折叠并关闭

1 个答案: