显示/隐藏元素破坏风格

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。