谁能帮我弄清楚如何使用 jquery 在页面上的一个 div 和另一个 div 下制作一个小下拉菜单。
这是我目前所拥有的(jquery/jquery UI)...
基本上我尝试的想法虽然需要修复,因为我猜它的 css 需要根据页面大小进行调整?这样下拉 div 总是在用户标签之类的东西下面。
无论如何,我不知道我在这里尝试的任何方法是否是正确/最好的方法,但我只是想学习它,所以请随时提供更好的方法。谢谢!
标记:
<div id='top-wrapper'>
<div id='top-inner-wrapper'>
<div id='title'>Main Title</div>
<div id='user-like-item'>User Name Type Thing</div>
</div>
</div>
<div id='content-wrapper'></div>
<div id='hidden-drop-down' style='display:none;'></div>
j查询:
$(document).ready(function () {
$("#user-like-item").hover( function () {
$(this).addClass("highlighted-user");
$("#hidden-drop-down").show('slide', { direction: 'up'}, 1000);
}, function () {
$(this).removeClass("highlighted-user");
$("#hidden-drop-down").hide('slide', { direction: 'up'}, 1000);
});
});
我试过的风格:
*{
padding:0;
margin:0
}
#top-wrapper{
position:fixed;
top:0;
width:100%;
background-color:#2d2d2d;
min-height:50px;
}
#top-inner-wrapper{
width:70%;
margin:0 auto;
color:white;
border-right:1px solid white;
border-left:1px solid white;
}
#title, #user-like-item{
width:40%;
float:left;
font-family:segoe ui;
font-size:1.3em;
font-weight:lighter;
margin:2% 0;
}
#user-like-item{
float:right;
font-size:.8em;
margin-top:30px
}
.highlighted-user{
color:#fa3701;
cursor:pointer;
}
#hidden-drop-down{
min-height:100px;
background-color:#e0e0e0;
border:1px solid #2d2d2d;
position:fixed;
left:58%;
width:20%;
top:55px
}
编辑:为不清楚的问题道歉。所以我想从另一个 div 下拉一个 div(比如那个用户名)。我只是在学习这个,所以可能有很多更好的方法,但 fiddle 就是我摆弄的。似乎下拉 div 的位置不是它应该的位置......如果我调整页面大小它没有正确对齐。只是想知道如何解决这个问题,或者更好的是还有什么可以做的改进?这有意义吗?
最佳答案
你的问题不是很清楚,我可以立即推荐的一件事是使用 jQuery toggle
函数:
$(document).ready(function () {
$("#user-like-item").hover( function () {
$(this).addClass("highlighted-user");
$("#hidden-drop-down").toggle('slide', { direction: 'up'}, 1000);
});
});
关于这个问题:如何你想定位它。你想达到什么目的?
更新
好的,我给你拿了。
你让问题很难解决,因为你的布局是用各种不同的属性构建的,因此设计没有响应。
让我教你一些基本的教训,可以防止将来出现缺陷:
- 如果你向右漂浮,那么一切都向右漂浮(针对你的情况)
- 如果您向左浮动,则将所有内容都向左浮动(针对您的情况)
- 始终为每个元素指定宽度和高度
- 为菜单项或其他需要“跟踪”的元素提供相对宽度和高度不是一个好主意
- 如果您希望您的设计具有响应性,请尽量避免绝对定位。否则,read this .
- 提供相对边距会使事情变得很多。而是让元素的宽度响应而不是它们各自的边距。
- 将完整内容包裹起来通常是明智的做法,这样您就可以完全控制其位置和鼠标移动
HTML
现在让我们来看看我写的新HTML:
<div id='content-wrapper'>
<div id='top-wrapper'>
<div class='top-inner-wrapper'>
<div id='title'>Main Title</div>
<div id='user-like-item'>User Name Type Thing</div>
</div>
</div>
</div>
<div class='top-inner-wrapper'>
<div id='hidden-drop-down' style='display:none;'><br>You can still hover over me</div>
</div>
如您所见,我在
content
和top-wrapper
周围放置了一个包装器。我这样做是因为我们需要跟踪鼠标移动,正如您将在下面的 jQuery 中看到的那样。此外,我将
top-inner-wrapper
设为一个类,这样我就可以将它的(复杂!!!)CSS 属性应用到hidden-drop-down
也是。
CSS
body {
width:100%;
height:100%;
}
*{padding:0;margin:0}
#top-wrapper{
top:0;
width:100%;
background-color:#2d2d2d;
min-height:50px;
}
.top-inner-wrapper{
// just put the width at 100%.
// because a width of 70% is very complex to work with
width:100%;
margin:0 auto;
color:white;
border-right:1px solid white;
border-left:1px solid white;
}
#title, #user-like-item{
width:40%;
float:left;
font-family:segoe ui;
font-size:1.3em;
font-weight:lighter;
// I changed from relative margin (10%) to absolute margin
margin-left:20px;
}
#user-like-item{
float:right;
width:200px;
font-size:.8em;
margin-top:30px;
// changed to color so I can track it's width
background-color:yellow;
// Relative margin: I don't like it but this is what you had
margin-right:10%;
}
.highlighted-user{
color:#fa3701;
cursor:pointer;
}
#hidden-drop-down{
// Now these changes are important
// ABSOLUTE HEIGHT
height:100px;
// ABSOLUTE WIDTH
width:200px;
background-color:#e0e0e0;
border:1px solid #2d2d2d;
top:50px;
// RELATIVE MARGIN: because you also did this at `#user-like-item`
right:10%;
margin-right:-1px;
position:absolute;
// float:right !!!
float:right;
}
#content-wrapper {
// always let the wrapper be 100%
width:100%;
// you can specify height of page here (or do auto if you actually have content)
height:600px;
background-color:lightblue;
}
jQuery
$(document).ready(function () {
$("#user-like-item").hover( function () {
$(this).addClass("highlighted-user");
// if hover over #user-like-item: slide down
$("#hidden-drop-down").slideDown(function()
{
// only slide up if mouse has entered #content-wrapper
$("#content-wrapper").mouseenter(function()
{
$("#hidden-drop-down").slideUp();
});
// only slide up if mouse has entered #top-wrapper
$("#top-wrapper").mouseenter(function()
{
$("#hidden-drop-down").slideUp();
});
});
});
});
请注意,使用这个新的 jQuery,隐藏的滑动 div 将不会像以前那样立即消失。这是因为您仍然希望用户能够阅读/单击 div。我的意思是:如果它再次向上滑动,滑动 div 有什么用。
可以找到我对应的jsFiddle by clicking this .
希望对您有所帮助。
祝你好运。
关于javascript - 在另一个 div 下动画的 div 的 CSS/JS/jQuery 定位....就像下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19144175/