在< div>中显示FadeItems彼此相邻 [英] Display FadeItems in <div> next to each other

问题描述

HTML：

 < 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屋！