在< div>中显示FadeItems彼此相邻 [英] Display FadeItems in <div> next to each other
问题描述
< script src =https://ajax.googleapis。 COM / AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本>
< div class =navigation_desktop>
< div class =button_desktop_01> 1.0主菜单
< div class =FadeItem_01>
< div> 1.1子菜单< / div>
< div class =button_desktop_02> 1.2子菜单
< div class =FadeItem_02>
< div>
< div> 1.2.1子菜单< / div>
< div> 1.2.2子菜单< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =button_desktop_01> 2.0主菜单
< div class =FadeItem_01>
< div class =button_desktop_02> 2.1子菜单
< div class =FadeItem_02>
< div>
< div> 2.1.1子菜单< / div>
< div> 2.1.2子菜单< / div>
< div> 2.1.3子菜单< / div>
< / div>
< / div>
< / div>
< div> 2.2子菜单< / div>
< / div>
< / div>
< / div>
CSS:
.button_desktop_01 {
float:left;
width:20%;
光标:指针;
background:#5882FA
}
.button_desktop_02 {
cursor:pointer;
}
.FadeItem_01,.FadeItem_02 {
display:none;
}
.FadeItem_02 {
float:left;
}
jQuery:
$(document).ready(function(){
$(。button_desktop_01,.button_desktop_02)。 ()。fadeIn(500);
});
$(。button_desktop_01,.button_desktop_02)。mouseleave(function( ){
$(this).children(。FadeItem_01,.FadeItem_02)。fadeOut(500);
});
});
上面的 FadeIn / Out 一些FadeItems的代码迄今为止完美。
现在我希望< code>< code>> 出现紧接着 < div class =FadeItem_01>
。
我尝试使用 float:left; 类的属性
.FadeItem_02
但它不起作用。
我如何必须修改我的代码来实现这一目标?
理想情况下,它应该像现在一样出现在完全相同的样式 (尺寸,颜色等)中,而不是在 em> < div class =FadeItem_01>
它应该在它旁边显示
您还可以在此处找到所有代码: https://jsfiddle.net/gycp99zj/6 /
您可以使用这些设置:
.button_desktop_02 {
cursor:pointer;
职位:亲属;
}
.FadeItem_01,
.FadeItem_02 {
display:none;
}
.FadeItem_01 {
position:relative;
}
.FadeItem_02 {
position:absolute;
left:120px;
top:0;
width:120px;
background:#5882FA
}
绝对定位需要子子菜单在子菜单中,父母的相对位置作为锚点,位置设置(顶部,左侧)决定它们出现的位置,并且还需要宽度。
jsfiddle中的代码: https://jsfiddle.net/avc7pr8a/1/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation_desktop">
<div class="button_desktop_01">1.0 Main Menu
<div class="FadeItem_01">
<div>1.1 Sub Menu </div>
<div class="button_desktop_02">1.2 Sub Menu
<div class="FadeItem_02">
<div>
<div>1.2.1 Sub Menu</div>
<div>1.2.2 Sub Menu</div>
</div>
</div>
</div>
</div>
</div>
<div class="button_desktop_01">2.0 Main Menu
<div class="FadeItem_01">
<div class="button_desktop_02">2.1 Sub Menu
<div class="FadeItem_02">
<div>
<div>2.1.1 Sub Menu</div>
<div>2.1.2 Sub Menu</div>
<div>2.1.3 Sub Menu</div>
</div>
</div>
</div>
<div>2.2 Sub Menu</div>
</div>
</div>
</div>
CSS:
.button_desktop_01{
float: left;
width: 20%;
cursor: pointer;
background: #5882FA
}
.button_desktop_02 {
cursor: pointer;
}
.FadeItem_01, .FadeItem_02 {
display: none;
}
.FadeItem_02 {
float: left;
}
jQuery:
$(document).ready(function() {
$(".button_desktop_01, .button_desktop_02").mouseenter(function() {
$(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500);
});
$(".button_desktop_01, .button_desktop_02").mouseleave(function() {
$(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500);
});
});
The code above FadeIn/Out some FadeItems which works perfectly so far.
Now I want that the <div class="FadeItem_02">
appears right next to the <div class="FadeItem_01">
.
I tried to do this wiht the float: left;
property on the class .FadeItem_02
but it does no work.
How do I have to modify my code to achieve this?
Ideally, it should appear in the exact same style (size, colour, etc.) as it does now but instead of appearing below the <div class="FadeItem_01">
it should appear right next to it.
You can also find all codes here: https://jsfiddle.net/gycp99zj/6/
You can use these settings:
.button_desktop_02 {
cursor: pointer;
position: relative;
}
.FadeItem_01,
.FadeItem_02 {
display: none;
}
.FadeItem_01 {
position: relative;
}
.FadeItem_02 {
position: absolute;
left: 120px;
top: 0;
width: 120px;
background: #5882FA
}
The absolute positioning takes the sub-submenu out of the submenu, the relative position of their parent acts as an "anchor", the position settings (top, left) determine where they appear, and it also needs a width.
That code in a jsfiddle: https://jsfiddle.net/avc7pr8a/1/
这篇关于在< div>中显示FadeItems彼此相邻的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!