Question

我是jquery / javascript的新手，当我点击导航栏中的按钮时，我正试图制作一个动画下拉框。

我的代码在jsfiddle http://jsfiddle.net/SQHQ2/2898/

中运行

但是当我尝试在我的网站中实现这个并刷新页面时，div完全消失了。我使用了inspect元素，它似乎改为“display：none”。我已经尝试将div更改为按钮，但仍无济于事。我只想让按钮工作！洛尔

请有人告诉我哪里出错了？

这是我的HTML：

<div class="col-md-4 right">
    <ul id="user-bar">
       <li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li>
       <li><a href="#">My Account</a></li>
       <li><a href="#">Logout</a></li>
    </ul>
</div>

       <!----- USER LINKS BOX ----->
        <div class="user-links-box">
          <h1>Test</h1>  
        </div>

我的CSS：

 .user-links-box {
    height: 400px;
    width: 285px;
    padding: 15px;
    top:-400px;
    right:0px;
    position: absolute;
    background-color: #111;
    color: #fff;
    text-align: center;
    z-index: 4;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

最后，我正在使用的js：

$(document).ready(function(){
  $("#userlinksbox").toggle(function(){
    $('.user-links-box').animate({top:40},500);
  },function(){
    $('.user-links-box').animate({top:-400},500);
  });
});

Answer 1

真的是#userlinksbox吗？你的小提琴告诉我#user-links-box

Answer 2

尝试以下更改：

<强> HTML

<div class="user-links-box" style="display:none">
    <h1>Test</h1>  
</div>

<强> CSS

.user-links-box {
    height: 400px;
    width: 285px;
    padding: 15px;
    top:40px; // CHANGED HERE
    right:0px;
    position: absolute;
    background-color:#111;
    color:#fff;
    text-align: center;
    z-index: 4;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

#userlinksbox { display: inline-block!important; }

<强> JS

$(document).ready(function(){
  $("#userlinksbox").click(function(){
        $('.user-links-box').slideToggle();
  }); 
});

Answer 3

试试这个

$(document).ready(function(){
  $("#userlinksbox").toggle(function(){
    $('.user-links-box').css({'display':'block'});
    $('.user-links-box').animate({top:40},500);
  },function(){
    $('.user-links-box').animate({top:-400},500);
  });
});

Answer 4

如何将.css()功能放在.toggle()功能之外的@ Vilvan的答案中？

$(document).ready(function(){
    $("#userlinksbox").toggle(function(){
        $('.user-links-box').animate({top:40},500);
    },function(){
        $('.user-links-box').animate({top:-400},500);
    });  

    $('#userlinksbox').css({'display':'block'});
});

当我使用ID时，Div显示更改为隐藏

4 个答案: