股利显示更改为隐藏，当我使用一个ID

我很新jQuery的/ javascript和我试图做一个动画下拉框，当我点击到我的导航栏中的按钮。股利显示更改为隐藏，当我使用一个ID

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

内但当我尝试到我的网站中实现这一点，并刷新页面，股利完全消失。我使用了检查元素，它似乎更改为“显示：无”。我试过将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); 
    }); 
});

来源

2015-10-08 preecey_

没有一个实际的链接，我们不能真正帮助，因为代码的小提琴作品。必须有其他事情正在进行。 –

你能从开发工具看到添加'display：none'的CSS类吗？'div'吗？ – Andrea

增加我的网站链接 –

尝试这些变化：

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

个

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

来源

2015-10-08 13:53:13 ToskaMan

Thank you！This works perfect。I really appreciate it ！ –

难道真的#userlinksbox？你拨弄告诉我#user-links-box

来源

2015-10-08 11:39:46 AlexG

不好意思啊，我现在已经更新了小提琴。我不再使用连字符。 –

这并不提供答案的问题。要批评或要求作者澄清，请在其帖子下方留言。 – Barett

@Barett的问题显然是“请能有人告诉我，我要去哪里错了吗？”。如果他只是针对错误的元素，这将是答案。 – AlexG

试试这个

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

来源

2015-10-08 11:45:47 Vilvan

没有运气，它仍然会改变显示为none –

如何放置.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'}); 
});

来源

2015-10-08 12:29:33 ToskaMan

仍然消失： - /它必须是一个div问题或其他 –

我编辑了选择器，它是#userlinksbox而不是.user-links-box。。 – ToskaMan

对不起，仍然无法正常工作。您是否检查了网站链接，看看发生了什么？如果您点击刷新，您可以看到它正在消失。 –

股利显示更改为隐藏，当我使用一个ID

回答

相关问题