顯示/隱藏元素破壞風格

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

嘗試的代碼下面的代碼片段。

$(':checkbox').change(function() { 
 
    if ($(this).is('#price1') && $(this).is(':checked')) { 
 
     $('.price-1').toggle(); 
 
     $('ul li:last-child').addClass('test'); 
 
    } else if ($(this).is('#price1')) { 
 
     $('.test').removeClass('test'); 
 
     $('.price-1').toggle(); 
 
    } 
 
    if ($(this).is('#price2')) { 
 
     $('.price-2').toggle(); 
 
    } 
 
});

ul { 
 
    padding:1em 0 0; 
 
    max-width: 50%; 
 
    margin: 0; 
 
    border: 1px solid #eee; 
 
} 
 
ul li { 
 
    list-style:none; 
 
    padding: 9px 0px; 
 
    display: inline-block; 
 
    width: 40%; 
 
} 
 
.test { 
 
    margin-top:8px; 
 
} 
 
input[type="text"], textarea { 
 
    padding: 0.8em 1em; 
 
    font-size: 0.85em; 
 
    border: 1px solid #eee; 
 
    color: #a3a3a3; 
 
    background: white; 
 
    outline: none; 
 
    width: 50%; 
 
    -webkit-appearance: none; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li style="margin-top: 9px;"> 
 
     <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> 
 
     <br/> 
 
    <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/kishoresahas/nazu61p7/1/

Answer 2

我會怎麼做：

<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。