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

Div display changes to hidden when I use an ID

本文关键字：显示 隐藏 Div ID      更新时间：2023-09-26

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

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

但是当我尝试在我的网站内实现这一点并刷新页面时，div完全消失了。我使用了inspect元素，它似乎变成了"display:none"。我已经尝试将div更改为按钮，但仍然无济于事。我只希望按钮能正常工作!lol

谁能告诉我哪里错了?

这是我的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);
  });
});

尝试以下更改:

<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();
  }); 
});

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

try this

$(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);
  });
});

如何将.css()函数放在@Vilvan的答案之外的.toggle()函数?

$(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'});
});
相关文章：