Question

所以基本上，我正在尝试制作一个按钮“给我回电话”，所以当你点击它时，它会消失并显示其他两个hiddens字段。

我试图改变的是那个页面顶部的小形式，它有2个字段，并且有一个回拨按钮。

Answer 1

尝试jquery show / hide函数，如

$("#div_to_show").show(); 
$("#div_to_hide").hide();

Answer 2

这就是你应该如何解决问题：

<强> HTML

<div id="div1"> </div>

<div id="div2" style="display:none"> </div>

<div id="div3" style="display:none"> </div>

<强> JS

document.getElementById("div1").style.display = "none"; document.getElementById("div2").style.display = "inline-block"; document.getElementById("div3").style.display = "inline-block";

Answer 3

另一个，一个班轮：

HTML

<div id="fields" style="display:none">
<input type="text" name="name" placeholder="Name"/>
<input type="text" name="tel" placeholder="Telephonoe"/>
</div>
<button type="button" id="contact-btn" onClick="toggleFields()">
Contact me
</button>

JS

 function toggleFields(){
    $('#fields, #contact-btn').toggle();
 }

示例JSFiddle

Answer 4

查看

中的

    <div style="display: none;" class="hideDiv">
<input type="hidden" name="_wpcf7" value="1101">
<input type="hidden" name="_wpcf7_version" value="4.4">
<input type="hidden" name="_wpcf7_locale" value="pt_PT">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1101-o1">
<input type="hidden" name="_wpnonce" value="7b5f59556f">
</div>

和 jquery

$(document).on('click','.send-cmb',function(e){
    e.preventDefault();
    $('.hideDiv').css('display:block');
});

Answer 5

试试这个

html代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>   
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Name">
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Telephone">
        <button type="button" id="callback" >
Call Back
</button>

js代码

jQuery( document ).ready(function() {

 jQuery(".txt").hide();
    jQuery("#callback").click(function(){
    jQuery(".txt").show();
    jQuery("#callback").hide();

    });
});

您可以查看demo here

单击按钮消失并显示隐藏的字段

5 个答案: