Question

我已经做了我认为正确的事情，但我仍然面临同样的问题。

单击bootstrap Glyphicon图标时，菜单不会像我的代码所示那样滑动/放松。

有人可以指出我做错了什么以及为什么？

继承人HTML：

<header>
    <i class="glyphicon glyphicon-align-justify nav-toggle"></i>
    <nav class="main-navigation">
        <span class="nav-toggle">Close</span>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
        </ul>
    </nav>        
</header>

继承人的CSS：

/* NAV MENU */

header {
    background-color: white;
    color: #0099ff;
    padding: 20px;
    position: relative;
}

.nav-toggle {
    position: absolute;
    top: 30px;
    cursor: pointer;
}

a {
    color: #0099ff;
    text-decoration: none;
}

nav li {
    list-style: none;
}

.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #005c99;
    text-align: center;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.main-navigation .nav-toggle {
    right: 5%;
    top: 5%;
}
.main-navigation.open {
    transform: translateX(0);
}

.main-navigation ul {
    margin: 0;
    padding: 0;
}

.main-navigation ul a {
    padding: 10px 20px;
    display: block;
}

.main-navigation ul a:hover {
    background: #0099ff;
}

还有一点点jQuery：

$(function() {
    $('.nav-toggle').on('click', function(){
        $('.main-navigation').toggleClass('open');
    });
});

Answer 1

我刚刚创建了一个JSFiddle，似乎一切正常。

记得加载jQuery和上次编译的Bootstrap javascript和css：

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<强>自举

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

修正了它。

原来这是我的script.js

的链接/ Mistype断开

感谢大家的帮助！： - ）

幻灯片菜单jQuery / CSS问题

2 个答案: