jquery - 2 个 JQuery Click 函数之间重叠

Question

<input id="btnPost" type="button" value="Post" style="width: 79px" />
<input id="btnAssign" type="button" value="Assign" style="width: 79px" />
<div id="div1">
    <textarea rows="10" cols="2" style="width: 401px"></textarea><br />
    <input id="btnPost2" type="submit" name="btnPost" value="Post" style="width: 60px" />
</div>
<div id="div2">
    <textarea rows="10" cols="2" style="width: 401px"></textarea><br />
    <input id="btnAssign2" type="submit" name="btnAssign" value="Assign" style="width: 60px" />    
</div>

JavaScript:

$(document).ready(function () {
        $('#div1').hide();            

        $('#btnPost').click(function () {
            $('#div1').toggle('fast');                
        });                           
});

$(document).ready(function () {

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

        $('#btnAssign').click(function () {               
            $('#div2').toggle('fast');               
        });                            
});

我的查询如下:

当我点击“发布”按钮时，出现“#div1”。但是，当我单击“分配”按钮而不最小化“div1”时，“#div1”和“#div2”会同时显示。

我尝试过 www.jsFiddle.com有关更多详细信息，请点击此链接:http://jsfiddle.net/RfgkU/69/

Answer 1

如果您只想同时显示其中一个 div，您可以在 JavaScript 中尝试以下操作:

$(document).ready(function () {
        $('#div1, #div2').hide();            

        $('#btnPost').click(function () {
            $('#div1').toggle('fast');
            $('#div2').hide();
        });                                                  

        $('#btnAssign').click(function () {               
            $('#div2').toggle('fast');
            $('#div1').hide();
        });                            
});

正如您在 this jsfiddle 上看到的那样