Question

如何点击添加自定义弹堆按钮消失？

        <div id="myDiv" style="display:none;" class="answer_list" >

                <input type="text" name="custom_url" value="<?php echo htmlentities(@$_GET['custom_url'], ENT_QUOTES, 'UTF-8')?>" id="custom_url" placeholder="Custom Slug" /> 

    <label for="custom_url">Optional</label> 
    </div>
<div>
<input type="button" value="Add Custom Slug" name="answer" onclick="ShowDiv()" />
</div>

    <script>
function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
}
</script>

我尝试过很多教程，但我不能

<input type="button" value="Add Custom Slug" name="answer" onclick="ShowDiv()" />

任何人都可以帮助我吗？在此先感谢

Answer 1

您可以设置按钮的ID，并在ShowDiv函数执行时隐藏它：

<div id="myDiv" style="display:none;" class="answer_list" >
    <input type="text" name="custom_url" value="<?php echo htmlentities(@$_GET['custom_url'], ENT_QUOTES, 'UTF-8')?>" id="custom_url" placeholder="Custom Slug" /> 
    <label for="custom_url">Optional</label> 
</div>
<div>
    <input id="add-cutom-slug-btn" type="button" value="Add Custom Slug" name="answer" onclick="ShowDiv()" />
</div>

<script>
function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
    document.getElementById("add-cutom-slug-btn").style.display = "none";
}
</script>

Answer 2

jquery方式

使用.hide()

$('#myDiv').hide();

描述：隐藏匹配的元素。

显示

使用.show()

$('#myDiv').show();

描述：显示匹配的元素。

＆＃13;

$('#hide').click(function() {
  $('#myDiv').hide();
})
$('#show').click(function() {
  $('#myDiv').show();
})
$('#toggle').click(function() {
  $('#myDiv').toggle('slow');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv" class="answer_list">
  <input type="text" name="custom_url" value="qwe" id="custom_url" placeholder="Custom Slug" />
  <label for="custom_url">Optional</label>
</div>
<div>
  <input type="button" value="hide" id="hide" name="answer" />
  <input type="button" value="show" id="show" name="answer" />
  <input type="button" value="toggle" id="toggle" name="answer" />
</div>

＆＃13;

Answer 3

您可以使用复选框...比如..

<div id="custom_url" style="display:none">
    <input type="text" name="custom_url" value="<?php echo htmlentities(@$_GET['custom_url'], ENT_QUOTES, 'UTF-8')?>" id="custom_url" placeholder="Custom Slug" /> 
    <label for="custom_url">Optional</label> 
</div>
<form>
<input type="checkbox" name="c1" onclick="showMe('custom_url', this)">Custom URL

<script type="text/javascript">
<!--
function showMe (it, box) {
  var vis = (box.checked) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}
//-->
</script>

这样做..

OnClick后隐藏按钮

3 个答案: