Question

这是我的div有很多子元素：

<div class="text-center welcome">
    <!--<p class="lead">You haven't added any feeds. Click <a href=#>here</a> to browse them.</p>-->
    <h1 id="welcome">Welcome to Shopaholic</h1>
        <!-- Sign up container -->
        <div class="signup-container">
            <div id="output"></div>
                <div class="form-box">
                    <form id="signup-form" action="" method="POST">
                        <input name="signupEmail" type="email" class="form-control" id="signupEmail" placeholder="Email address">
                        <input name="signupPassword" type="password" class="form-control" id="signupPassword" placeholder="Password">
                        <input name="signupPassword2" type="password" class="form-control" id="signupPassword2" placeholder="Password">
                        <select name="signupCountry" id="signupCountry" class="selectpicker">
                            <option value="0">Country</option>
                            <option value="United States">United States</option>
                            <option value="United Kingdom">United Kingdom</option>
                            <option>Canada</option>
                        </select>
                        <select name="signupGender" id="signupGender" class="selectpicker">
                            <option value="0">Gender</option>
                            <option value="f">Female</option>
                            <option value="m">Male</option>
                        </select>
                        <button id="signup" class="btn btn-success btn-block signup" type="submit">Sign up</button>
                    </form>
                    <p class="response-text" id="signup-response"></p>
                </div>
            </div>
        </div>
        <!-- Login container -->
        <div class="login-container">
            <div id="output"></div>
                <div class="form-box">
                    <form id="login-form" action="" method="">
                        <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address">
                        <input type="password" class="form-control" name="loginPassword" id="loginPassword" placeholder="Password">
                        <button id="login" type="submit" class="btn btn-info btn-block login">Log in</button>
                    </form>
                    <p class="response-text" id="login-response"></p>
                </div>
            </div>
        </div>
    <p class="text-center"><a id="login_link" href=#>Already registered?</a><a id="signup_link" href=#>New user?</a></p>
    <p class="text-center" id="forgotten"><a href=#>Forgot your password?</a></p>
</div>

但是，当我运行$('.welcome').hide();时，表示的行之后的所有内容仍会显示。知道为什么会这样吗？

Answer 1

删除</div>之前的结束;您过早关闭了<div>内容。我看起来像是在第2行的<h1>标记后意外缩进了代码。

正确缩进，您的代码应如下所示：

<div class="text-center welcome">
    <h1 id="welcome">Welcome to Shopaholic</h1>
    <!-- Sign up container -->
    <div class="signup-container">
        <div id="output"></div>
        <div class="form-box">
            <form id="signup-form" action="" method="POST">
                <input name="signupEmail" type="email" class="form-control" id="signupEmail" placeholder="Email address">
                <input name="signupPassword" type="password" class="form-control" id="signupPassword" placeholder="Password">
                <input name="signupPassword2" type="password" class="form-control" id="signupPassword2" placeholder="Password">
                <select name="signupCountry" id="signupCountry" class="selectpicker">
                    <option value="0">Country</option>
                    <option value="United States">United States</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option>Canada</option>
                </select>
                <select name="signupGender" id="signupGender" class="selectpicker">
                    <option value="0">Gender</option>
                    <option value="f">Female</option>
                    <option value="m">Male</option>
                </select>
                <button id="signup" class="btn btn-success btn-block signup" type="submit">Sign up</button>
            </form>
            <p class="response-text" id="signup-response"></p>
        </div>
    </div>
    <!-- Login container -->
    <div class="login-container">
        <div id="output"></div>
        <div class="form-box">
            <form id="login-form" action="" method="">
                <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address">
                <input type="password" class="form-control" name="loginPassword" id="loginPassword" placeholder="Password">
                <button id="login" type="submit" class="btn btn-info btn-block login">Log in</button>
            </form>
            <p class="response-text" id="login-response"></p>
        </div>
    </div>
    <p class="text-center"><a id="login_link" href=#>Already registered?</a><a id="signup_link" href=#>New user?</a></p>
    <p class="text-center" id="forgotten"><a href=#>Forgot your password?</a></p>
</div>

一些子元素没有隐藏在$（＆＃39; #div＆＃39;）。hide（）

1 个答案: