css - 如何最好地编写具有相对定位的代码以跨越整个 div

Question

我正在尝试创建一个 Tiffany&Co 风格的过滤器选择器菜单。请参阅:http://www.tiffany.com/shopping/CategoryBrowse.aspx?mcat=148206&cid=288196#p+1-n+10000-c+288196-s+5-r+-t+-ni+1-x+-pu+-f+-lr+-hr+-ri+-mi+-pp+

附件是我的 jsfiddle 的链接:http://jsfiddle.net/ger9tdxw/1/

每个“下拉菜单”的宽度都是自动的，我在通过 CSS 对位置进行硬编码时遇到了问题。

.filter-dropdown.gemstones .dropdown {
  /* Size & position */
    position: absolute;
    top: 32px;
    left: -182px;
    right: 0;
    width: 870px;
    padding-left: 172px;

    border: none;

    border-top: 1px dotted #000;
    border-bottom: 1px solid #000;
}

即:单击“ Material ”>“纯银”- 会导致将第二个下拉菜单推向右侧，从而打乱我设置的位置。

如您所见，我正在使用非常原始的方法来使用 left: -px; 定位下拉菜单；和填充来定位它们。有更好的方法吗？

我不是很擅长 CSS，但仍在学习，所以任何建议/指点都将不胜感激!

Answer 1

您的 fiddle 中的内容似乎过于复杂。你无论如何都在使用 jquery，所以为什么不使用它来定位。我会在导航中使用链接，因为它们实际上就是这样，并使用 ids 将它们链接到页面的相关部分。这也简化了 jquery。这是我粗略的准备改编:

HTML

<div class="container">
    <div class="nav">
        <h4>Rings</h4><span class="count">7</span>
        <a href="#lstMaterials" class="materials">Materials</a>
        <a href="#lstGems" class="gems">Gemstones</a>
        <a href="#lstPrice" class="price">Price</a>
    </div>
    <div id="dropDownContainer" style="margin-left:1px">
        <ul id="lstMaterials" class="materials dropdown">
                        <li><a href="#"><i class="icon-envelope icon-large"></i>Sterling Silver</a>
            </li>
            <li><a href="#"><i class="icon-truck icon-large"></i>Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>White Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Rose Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Titanium</a>
            </li>
        </ul>
        <ul id="lstGems" class="dropdown gems">
            <!-- etc -->
        </ul>
        <ul id="lstPrice" class="dropdown price">
            <!-- etc -->
        </ul>

    </div>
</div>

CSS

.nav
{
    position:relative;

}

.nav h4 
{
    display:inline-block;
    margin-right:2px;
}

.nav .count:before
{
    content:"(";

}

.nav .count:after
{
    content:")";
    margin-right:5px;
}

.nav a 
{
    display:inline-block;
    padding-right: 20px;
}

#dropDownContainer
{
    position:relative;
}

#dropDownContainer ul
{
    list-style-type:none;
    padding:0;
}

.dropdown {display:none;}

#dropDownContainer ul
{
    border-top:dotted 1px black;
    border-bottom:dotted 1px black;
    padding-top:10px;
    padding-bottom:10px;
}

Javascript

/*Set Position of dropdowns*/
var mrgnLeft = $(".nav .materials").position().left + "px";
$("#lstMaterials").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .gems").position().left + "px";
$("#lstGems").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .price").position().left + "px";
$("#lstPrice").css("padding-left",mrgnLeft);


/*Show them on click*/
$(".nav a").click(function(){
     $("#dropDownContainer .dropdown").hide();
    console.log($(this).attr("href"));
    console.log( $($(this).attr("href")))
     $($(this).attr("href")).show();
    return false; //stops the native link behaviour
});

Demo

这应该会让您朝着正确的方向前进。您可以轻松地替换 hide() 并使用 add\removeClass("active") 显示并根据需要添加您的 CSS