2

我有一个运行良好的网页，直到我在其周围添加了以下 HTML 和 CSS：

HTML：

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

CSS：

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

奇怪的效果：

您可以在这个jsfiddle中看到“奇怪的效果” 。

如果您单击任何包含 a 的 div (c)，您会注意到出现了一个小下拉菜单。如果您随后尝试通过拖动小部件的标题来移动小部件，请注意通过单击出现的下拉列表会发生什么情况(c)

在我添加上面的 HTML 和 CSS 之前，这并没有发生。

截图：

以下是一些显示问题的屏幕截图：

下拉菜单在这里看起来不错： 在此处输入图像描述 点击放大。

使用旧 HTML 启用下拉菜单移动小部件，下拉小部件正确移动： 在此处输入图像描述 点击放大。

在添加了新的 div/css 的情况下启用下拉菜单移动小部件，使用小部件时下拉菜单移动不正确： 在此处输入图像描述 点击放大。

问题：

有没有办法在不丢失 HTML 和 CSS 添加到页面的效果的情况下纠正它，而不会导致下拉菜单做奇怪的事情？

4

2 回答 2

2

当您开始拖动 时.widget，jQuery-UI 会position: absolute;为该.widget元素添加一个样式，该样式会在拖动停止时被删除。这就是导致下拉菜单跳转位置的原因。

要解决此问题，请将position: relative;(position: absolute;也可以) 添加到样式中.widget并重新评估您的定位算法。我会建议：

$dd.css({
    top: $nav3.outerHeight()+10,
    right: 10
});

您可能还需要增加z-indexof .dropdown。

http://jsfiddle.net/mblase75/RrpGr/14/

还有许多其他优化可以完成，但这应该足以解决您的问题。

于 2012-11-27T15:30:49.560 回答
1

这是因为您给了一个 div 的填充。

您的下拉菜单相对于元素的位置。当您开始拖动它时，下拉菜单相对于另一个元素的位置。

总的来说，我发现您的 HTML 和 CSS 非常混乱，但这里有一个解决方案：http: //jsfiddle.net/RrpGr/3/

我从 .widget_header 中删除了溢出：隐藏，因为它的唯一目的是包含浮动元素（对吗？），而是添加了一个伪元素来清除浮动。

.widget_header:after {
    content: "";
    display: table;
    clear: both;
}

此外，我从您的 Javascript 中删除了很多行。这些仅用于设置 CSS 属性（或计算值）。

我不明白为什么您不能仅相对于 .widget_header 定位下拉列表（这就是我所做的）？

于 2012-11-27T15:33:12.297 回答