显示/隐藏元素破坏样式

Question

选中复选框时，我希望显示或隐藏输入文本元素。

我有一个<ul>列表和4个<li>。第1和第3 li是复选框，第2和第4 li是文本输入。选中复选框时，jquery将显示输入文本，如果未选中则隐藏。但它打破了风格。

<ul>
    <li>
        <input type="checkbox" id="price1" value="">
        <label for="price1"><span></span>Se Vende</label>
    </li>
    <li class="price-1" style="display: none;">
        <input type="text" placeholder="Precio de Venta"name="price[sale]" />
        <span class="unit unit-2">&euro;</span>
    </li>
    <li class="test">
        <input type="checkbox" id="price2" value="">
        <label for="price2"><span></span>Se Alquila</label>
    </li>
    <li class="price-2" style="display: none;">
        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" />
        <span class="unit unit-2">&euro;</span>
    </li>
</ul>

我正在努力让它在这里工作：http://jsfiddle.net/nazu61p7/

Answer 1

我会怎么做：

<lu>
    <li>
        <input type="checkbox" />Se Vende
        <div>
            <span>&euro;</span>
            <input type="text" placeholder="Precio de Venta" name="price[sale]" />
        </div>
    </li>
</ul>

使用此css：

ul li {width: 100%;}
ul li div {width:100%;}

当然，你需要调整一下你的js。