javascript - 按 Div Id 显示/隐藏

Question

我在一个表单中有几个字段，如果用户点击一个字段，我想显示一个表格，否则如果他们点击另一个字段，表格应该被隐藏。

我试过这个 javascript 但是当点击其他字段时它不会隐藏表格:

<script>
function myFunction() {
    if (document.getElementById("userform")) {
        document.getElementById("userinfo").style.display="block";
    } else {
        document.getElementById("userinfo").style.display="none";
    }
}

</script>   

在每个字段中，我都在每个输入类型中包含了一个 onclick="myFunction()"。表格设置为 style="display:none"

这是 HTML:

    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" id="userform"
                    placeholder="Enter your unique Pi identity" onclick="myFunction()">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword1" class="col-sm-1 control-label">
                 <b>Password</b>
            </label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword1"
                    placeholder="Password" onclick="()">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-sample btn-lg">
                    <b>Submit</b>
                </button>
            </div>
        </div>
    </form>





    <div id="userinfo" class="collapse in" style="display:none">
        <table class="table table-bordered" id="phone-table">
            <tbody>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            &nbsp;<br> <b>1</b>
                        </button>
                    </td>
                    <td class="col-md-1">
                        <button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>ABC<br>2
                            </b>
                        </button>
                    </td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>DEF<br>3
                            </b>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>GHI<br>4
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>JKL<br>5
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>MNO<br>6
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>PQRS<br>7
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>TUV<br>8
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>WXYZ<br>9
                            </b>
                        </button></td>
                </tr>
                <tr>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b>&nbsp;<br>0
                            </b>
                        </button></td>
                    <td class="col-md-1"><button type="button"
                            class="btn btn-primary btn-xs1">
                            <b><i class="fa fa-eraser"></i><br>Clr</b>
                        </button></td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

因为 Jquery 是标签之一，我把我的美分投入到 jquery 中

.hide();/.show(); 隐式设置 dislay 为 block 或 none 在 css 中。

$(function(){
 $('#close').on('click',function(){
   $('#danceforme').hide();
 });
 $('#open').on('click',function(){
   $('#danceforme').show();
 });
});

html

<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>

<div id="danceforme">
   I am dancing
</div>

演示:http://jsfiddle.net/doniyor/5FT9x/