Question

好的，所以在我的页面的left_col中，我有一个列表UL LI，它包含一个jQuery切换来打开一个小盒子，即“LoginBox”。

<ul>
    <li class="members"><a href="/members/signon.asp?userType=member">Members</a></li>
    <li class="employers"><a href="/employers/signon.asp?userType=employer">Employers</a></li>
    <li class="providers"><a href="#LoginBox" class="clicker">Providers</a></li>
        <div class="loginbox" id="LoginBox">
            <p>Medical</p>
            <p>Dental</p>
        </div>
    <li class="brokers"><a href="/brokers/signon.asp?userType=broker">Brokers</a></li>
</ul>

当调用jQuery时，它会将其下面的元素向下推。正如所料。我没有得到的是我在这个UL LI下面有一个H3标签，它有一个背景图片。 H3的文本部分被推下，但是背景图像似乎保持不变，而被推下来的UL LI只是掩盖了H3的背景图像。

为什么文本会移动，而不是背景图像本身？

这是H3风格：

    .sectionmenu h3{
    background: url(/_images/h3-triangle.gif) left center no-repeat;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 0px 4px 10px;
    margin: 0;
    border-bottom:1px dotted #aeaeae;;
}

和登录框样式：

    .loginbox{
    display:none;
    width:100px; 
    height:50px; 
    margin:0 0 0 77px;
}

Answer 1

ul 中不能包含 div 。尝试将其更改为 li

<li class="loginbox" id="LoginBox">
 <p>Medical</p>
 <p>Dental</p>
</li>

ul 的唯一合法子女是 li 。 li 可以包含 div 等块元素。我认为一旦你验证你的HTML，一切都会按预期工作。

jQuery切换推动其他元素...恶霸！

1 个答案: