Question

我正在尝试动画我的菜单栏，但它只是在没有动画播放的情况下掉落我已经检查过以确保我安装了jQuery并且它在那里。任何想法为什么它只是下降而不是它应该动画？

＆＃13;

var tab = $('#menu .menu')

tab.on('click', function(){
    $(this).next().slideToggle();

    });

＆＃13;

.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}
.logo {

    width: 100px;
    height: 50px;


}
.menu {
    display: none;
    width: 100%;
    padding: 30px 10px 50px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
}
.menu ul {
    margin-bottom: 0;
}
.menu a {
    color: #333;
    text-transform: uppercase;
    opacity: 0.8;
}
.menu a:hover {
    text-decoration: none;
    opacity: 1;
}
/*deviders*/
.home{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #423840;
}

.about {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #8dd8f8;
}

.service {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #9D714F;
}

.info{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.contact {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 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>
<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="js/custom.js"></script>
</head>
  <body>
    <a class="menu-bar" data-toggle="collapse" href="#menu">
                <img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
            </a>
        	<div class="collapse menu" id="menu">

                <ul class="list-inline">

                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#service">Services</a></li>
                    <li><a href="#info">Works</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
        	</div>



<section id="home" class="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h1>Home</h1>
            </div>
        </div>
    </div>
</section>

<section id="about" class="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Profolio</h1>
                <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
            </div>
        </div>
    </div>
</section>

<section id="service" class="service">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Service</h1>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="info" class="info">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Info</h1>
            </div>
        </div>
    </div>
</section>


<section id="contact" class="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Contact us</h1>
            </div>
        </div>
    </div>
</section>
</body>

＆＃13;

Answer 1

Check this simple fiddle

你必须像这样切换菜单，（首先包括 Jquery ）

以下是切换用于菜单的简单基础，

<强> Jquery的

$( ".menu-bttn" ).click(function() {
    $( ".main-nav" ).slideToggle(300);
});

示例HTML菜单

<a class="menu-bttn">Menu</a>
<ul class="main-nav">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>

示例CSS

.menu-bttn{
   display:inline-block;
   background:#111111;
   color:#FFFFFF;
   padding:10px 18px;
   cursor:pointer;
}

.main-nav {
   display:none;
   list-style: none;
   margin:0;
   margin: 0;
   padding: 0;
}

.main-nav a{
   display:block;
   background:#666666;
   color:#FFFFFF;
   padding:10px 18px;
   text-decoration: none
}

Answer 2

尝试在身体末端声明你的JQuery？

<body>
... your code ...

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

jQuery slideToggle（）; bootstrap 3不是流畅的动画

2 个答案: