jQuery 切换插入其他元素......恶霸!

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 的唯一合法 child 是 li。 li 可以包含 block 元素，例如 div。我认为一旦您验证了您的 html，一切都会按预期工作。