当我单击打开按钮时，页面中应出现一个文本框

Question

当我单击活动按钮时，页面中应出现一个框，当我单击关闭时，它应从页面中隐藏

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary ">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Open
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Closed
    </label>
</div>

Answer 1

使用单选按钮的更改事件

 $("input[name='options']").on('change',function(){ if($(this).attr('id') == 'option1'){ $('#myDiv').show(); }else{ $('#myDiv').hide(); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div> <body> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary "> <input type="radio" name="options" id="option1" autocomplete="off" checked> Open </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Closed </label> </div>

Answer 2

您可以使用引导模式和模式按钮在单击按钮时打开一个框。 如果你想制作一个自定义按钮，那么这里是 jquery 的代码。

$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open 
})


});

Answer 3

那是你要的吗？

 $(document).ready(function() { $('input[name=options]').change(function(e) { var isOpen = $(this).val() == "Open"; $('#box').toggle(isOpen); }); });

 #box { padding-top: 15px; }

 <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary "> <input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open </label> <label class="btn btn-secondary"> <input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed </label> </div> <div id="box">More Info</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

当我单击打开按钮时，页面中应出现一个文本框

问题描述

3 个解决方案

解决方案1
2 2020-02-01 08:06:22

解决方案2
1 2020-02-01 07:57:13

解决方案3
1 已采纳 2020-02-01 07:57:25

当我单击打开按钮时，页面中应出现一个文本框

问题描述

3 个解决方案

解决方案1 2 2020-02-01 08:06:22

解决方案2 1 2020-02-01 07:57:13

解决方案3 1 已采纳 2020-02-01 07:57:25

解决方案1
2 2020-02-01 08:06:22

解决方案2
1 2020-02-01 07:57:13

解决方案3
1 已采纳 2020-02-01 07:57:25