html布局发生变化答案

【问题标题】：html layout getting changedhtml布局发生变化
【发布时间】：2014-04-13 15:33:49
【问题描述】：

我是 css、html5 和 jquery 的新手。我正在尝试构建一个菜单，其中列表项在悬停时出现和消失。正如 mplungjan 所问的，代码在这里： http://jsfiddle.net/m5ab6/

HTML 是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
    rel="stylesheet"
    href="drop.css"
>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
</head>
<body>
    <nav class="main">
        <ul id="topbar">
            <li class="droplist">Fruits
                <ul class="subdrop">
                    <li>Apple</li>
                </ul>
            </li>
            <li class="droplist">Vegetables
                <ul class="subdrop"></ul>
            </li>
        </ul>
    </nav>
</body>
<!-- <script src="drop.js"></script> -->

</html>

CSS 是：-

@CHARSET "UTF-8";

.main{
    width: device-width;
    height:200px;
}
#topbar
{
    background-color: black;
    color: grey;
    /*display: none;*/
    list-style-type: none;
}

.droplist
{
    display: inline;
    padding: 20px;
    position: relative;
}
.subdrop{
    display:none;
}

Javascript 是：-

function hoverinfunc(){
    $(".subdrop").show(500);
    //$("subdrop").css({"position:"})
}
function hoveroutfunc(){
    $(".subdrop").hide(500);
}
$(document).ready(
        $("li.droplist").hover(hoverinfunc, hoveroutfunc)
        );

问题：从水果/蔬菜中悬停会改变蔬菜的布局。通常，蔬菜放在水果的右侧。但是，在水果/蔬菜中不断徘徊会导致蔬菜落入水果之下。我的要求是蔬菜的位置应该总是在水果的右边

我的解决方案（可能是一个幼稚的解决方案）：我在 css 文件的 .droplist' 中添加 float:left;。但是，正因为如此，背景颜色丢失了。

请帮助我理解我错在哪里。

【问题讨论】：

请添加一个jsfiddle.net
并将代码也留在这里！

标签： javascript jquery css html

【解决方案1】：

jsFiddle example

function hoverinfunc() {
    $(".subdrop", this).stop().show(100);
}
function hoveroutfunc() {
    $(".subdrop", this).stop().hide(300);
}

$(function(){ // DOM ready shorthand

    $("li.droplist").hover(hoverinfunc, hoveroutfunc);

});

CSS：

.main {
    width: 100%;
    height:200px;
}
#topbar {
    background-color: black;
    color: grey;
    list-style: none;
}
.droplist {
    position: relative;
    display: inline-block; /*for padding to work*/
    padding: 20px;
}
.subdrop {
    position:absolute;
    left:0;             /* to properly align on the parent LI left */
    background:black;
    display:none;
    padding:20px;
    white-space:nowrap; /*for text to overflow parent LI size*/
}

另一种简单又好用的 JS 方法是：jsFiddle example

$("li.droplist").hover(function(){
    $("> ul", this).stop().slideToggle(280);
});

如果您想根据事件类型以不同方式控制动画速度，这很容易：将事件参数（.hover() 方法侦听mouseenter 和mouseleave）传递给条件运算符（?: ) 喜欢：

$("li.droplist").hover(function( e ){
    $("> ul", this).stop().slideToggle(e.type=='mouseenter'?100:300);
});

是mouseenter 吗？ (TRUE) 动画 100 毫秒：(ELSE [is mouseleave]) 动画 300 毫秒

【讨论】：

感谢代码中的 cmets。对我这样的初学者真的很有帮助
@GodMan 不客气！有时在创建一些基本内容时使用jsBin.com 之类的工具确实很有帮助，因为在编写代码时，您可以立即在屏幕上看到更改，这确实有助于直观地快速了解每个 CSS 属性的含义以及发生的情况如果修改。
酷。我将使用 jsbin.com 和 jsfiddle.net 等工具。它们确实很有帮助。另外，我喜欢在您的回答中使用this，因为它回答了我的另一个疑问。你摇滚
@GodMan > ul 表示的直系子女；而this 表示这个，悬停的，元素。 为什么？因为如果您删除>，并且如果您希望拥有多个嵌套子菜单，它将一次打开它们。如果您删除 this，它可能会选择所有选择器而不是所需的 hover 一个。

【解决方案2】：

你需要绝对定位你的子菜单：

.subdrop{
    display:none;
    position: absolute;
}

Working demo

【讨论】：

实际上，我不知道这个错误的原因。您能否在回答中也解释一下？

【解决方案3】：

为什么要为此使用 javascript？只是为了得到幻灯片效果？

一个基本的“悬停时显示子菜单”可以通过相当简单的 CSS 而无需 javascript 轻松完成。例如，使用您的 HTML 并将 CSS 更改为

.main{
    width: device-width;
    height:200px;
}
#topbar, .subdrop
{
    background-color: black;
    color: grey;
    /*display: none;*/
    list-style-type: none;
}

.droplist
{
    display: inline;
    padding: 20px;
    position: relative;
}
.subdrop{
    display: none;
}
.subdrop li{
    padding-right: 20px;
    margin-left: -20px;
}
.droplist:hover .subdrop{
    display: block; 
    position: absolute;
}

您可以完全删除 javascript。看到它在http://jsfiddle.net/QnwcW/2/上工作

如果您想要动画，可以使用 CSS3 添加这些动画。一个快速的谷歌（看起来不错，但我实际上并没有使用过这个页面）产生例如http://candpgeneration.com/toys/CSS3-dropdown-tut.php

只是一种选择。我认为在这种事情上尽可能坚持使用 CSS 比在不需要时使用 javascript 更干净。

【讨论】：

这是您建议的示例，仅在 Vegetables jsfiddle.net/QnwcW/3 中添加了一个子菜单jsfiddle.net/QnwcW/3 我觉得这很奇怪。一个好的用户界面也意味着使用简单的动画。如果您没有任何代码可以分享关于如何在纯 CSS3 中执行此操作（SO 上已经有关于此的主题），您不应将链接粘贴到没有代码覆盖的外部站点，因为这些站点可能有一天会关闭，而您的链接（和答案）没用。
您发布的链接中的那个人也创建了暗示特定子菜单高度的下拉菜单，以便（所谓的“CSS3 MAGIC”...）这似乎比就像一个非常糟糕的资源来实现所需的，因为仅仅添加一个额外的子菜单项就意味着网站管理员需要嗅探 CSS，找到子菜单行，并改变它的高度。所以-1。 CSS3 magic 应该通过动画max-height 属性来实现。同样，关于这个主题的更多信息请参见 SO。
@Adam：这个 sn-p 只是我计划在网站上做的一个小例子。所以，我需要 jquery 来做更多的事情，因为它看起来很容易使用。不过，我一定会看看 CSS 动画（我只做过一些关于 CSS 2 的教程，但 CSS3 正在等待中）。
@GodMan 忘记那个链接。（阅读我上面评论中的原因。）
@GodMan 关于我的评论这里也是一个关于如何使用 CSS3 和提到的 max-height stackoverflow.com/questions/21076846/… 实现它的示例，我仍然建议使用 jQuery，因为即使使用 @987654328 @您需要设置一个最大高度，在网站管理员使用太多内容填充它的子菜单后，这在生产中可能不正确 -> 超过该最大高度值。