<div class="col-md-12 col-xs-12">
<style type="text/css">
.syhhma{
padding-top: 15px;
padding-bottom: 20px;
padding-left: 3%;
}
.jmbag {
color: #2c73be;
text-decoration: none;
}
.jmbag span {
padding: 2px 6px;
margin-right: 6px;
background: #2c73be;
color: #fff;
}
.btn-default2c73be{
background: #2c73be;
color: #fff;
width: 70px;
}
.syhhh3{
font-size: 14px;
color: #666666;
font-weight: normal;
}
.syhhsele{
color: #666;
font-size: 14px;
width: 76% !important;
}
.syhhh4{
color: #2c73be;
font-size: 14px;
font-weight: normal;
margin-bottom: 0;
cursor: pointer;
}
.addhcd{
display: none;
}
.checkout_other .syhhma{
display: none;
}
.checkout_other2 .syhhma{
display: block;
}
</style>
<div class="checkout_other">
<a href="javascript:void(0);" class="jmbag" onclick="showCheckoutOther(this);">
<span>+</span>使用優惠券
</a>
<div class="form-inline syhhma">
<div class="form-group" style="width:380px;">
<label class="syhhh3">使用優惠券：</label>
<select class="form-control syhhsele">
<option>請選擇</option>
<option>請選擇1</option>
</select>
</div>
<div class="form-group" style="margin-right:3px;font-size:14px;">或</div>
<span class="addhcd">
<div class="form-group" style="margin-right:5px;">
<input type="text" class="form-control" placeholder="輸入優惠券">
</div>
<button type="submit" class="btn btn-default2c73be">使用</button>
</span>
<span class="addzjsrd">
<div class="form-group" style="margin-right:5px;">
<label class="syhhh4">直接輸入優惠券號</label>
</div>
</span>
</div>
</div>

<script type="text/javascript">

function showCheckoutOther(obj)
{
var otherParent = obj.parentNode;
otherParent.className = (otherParent.className==‘checkout_other‘) ? ‘checkout_other2‘ : ‘checkout_other‘;
var spanzi = obj.getElementsByTagName(‘span‘)[0];
spanzi.innerHTML= spanzi.innerHTML == ‘+‘ ? ‘-‘ : ‘+‘;
}

$(function(){
$(".addzjsrd").click(function(){
$(this).hide();
$(".addhcd").show();
});
})

</script>


</div>

使用優惠券效果