jquery - h3 在淡入或淡出后移动

Question

我一直在完成这个网站的重新设计，想在其中添加一些有趣的新功能。我在页脚中嵌套了一个联系表格，以使其不可见但又不会忘记。 :p 我的脚本工作得很好，fadeToggle 的技巧很好，但是作为点击元素的主标题在激活时似乎左右摇摆。我只隐藏了 li 而不是 ul 或 h3 所以我不确定它为什么要移动。任何想法将不胜感激!这对我来说不是生死攸关，但它确实让我很恼火哈。

Live site

jsFiddle before fix

jsFiddle fixed

HTML

<div class="formS">
    <span class="footerT">© Copyright 2013 Ohio Association of Health Underwriters</span>
    <form action="" method="post">
      <ul>
        <h4>Contact Us (click here)</h4>
        <input type="hidden" name="subject" value="Submission" /> 
        <input type="hidden" name="redirect" value="thankyou.html" />
        <li><label for="name">Name</label>
        <input type="text" name="name" id="name"></li>

        <li><label for="zip">Zip</label>
        <input type="text" name="zip" id="zip"></li>

        <li><label for="city">City</label>
        <input type="text" name="city" id="city"></li>

        <li><label for="telephone">Telephone</label>
        <input type="text" name="telephone" id="telephone"></li>

        <li><label for="email">Email</label>
        <input type="text" name="email" id="email"></li>

        <li><label for="comments">I would like to know:</label>
        <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>

        <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li>

        <input type="hidden" name="form_order" value="alpha"/>
        <input type="hidden" name="form_delivery" value="hourly_digest"/>
        <input type="hidden" name="form_format" value="text"/>
      </ul>
  </form>
</div>

CSS

/* Contact form page */

.formS {
width: 960px;
margin: 0 auto;
padding: 0;
}

form > ul           {
font-size: 18px;
padding: 0;
margin: 0;
float: right;
    list-style-type:none;
}

form > ul > li {
padding: 5px;
display: none;
}

form { 
text-align:left; 
padding: 0 10px 10px 10px;
height: 408px;
}

.formS > form > ul > li > label     {
float: left;
width: 50px;
margin:5px 10px 0 0;
text-align:right;
display:block;
background:none;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

input:focus, textarea:focus {
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #fff;
text-shadow: 0 1px 0 #2b2b2b;
}

textarea {
width: 150px; 
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
resize: vertical;
}

.formS > form > ul > li > input {
width: 150px; 
height: 15px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
}

jQuery

$('form ul h4').on('click', function() { 
    $('form > ul > li').stop(true).fadeToggle(1500); 
});

(附:我确实知道输入标签不能放在 ul 中，目前正在修复此联系表上以前开发人员的错误 >.>。至少我只需要处理自己本网站的其余设计/开发!)

Answer 1

<ul> 的宽度由其中的可见元素决定。您需要在 <ul> 上指定宽度这与联系表格的完全可见版本一样宽。例如:

form > ul {
    width: 240px;
}