Question

我有一个布局，只需点击一个按钮就会出现一个框，点击同一个链接时，框应该消失

我的完整代码位于JS Fiddle

问题是，在点击链接打开框后，我通过点击登录/注册来更改其中的内容，之后我再也不能通过点击主链接关闭框了，可以任何人都告诉它如何做到

HTML CODE

<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Main Link</b> <span class="caret"></span></a>
    <div id="demo" class="dropdown">
        <ul id="loginbtn" class="dropdown-menu">
            <li>
                <form>
                    Login form
                </form>
                <a href="#" id="register">Register</a>  
            </li>
        </ul> 

        <ul id="signupbtn" class="dropdown-menu">
            <li>
                <form>
                    Register form
                </form>

                <a href="#" id="login">Login</a>        
            </li>
        </ul>
    </div>

CSS

#signupbtn
{
  display:none;
}

SCRIPT

$(document).ready(function(){
        $("#register").click(function(e){
            e.preventDefault();
            $('#loginbtn').hide(); 
            $('#signupbtn').show();
            return false;
        });
    });

    $(document).ready(function(){
        $("#login").click(function(e){
            e.preventDefault();
            $('#loginbtn').show(); 
            $('#signupbtn').hide();
            return false;
        });
    });

Answer 1

一种方法应该是使用隐藏类。

JsFiddle ：https://jsfiddle.net/p1a0v6kj/

<强> HTML ：

<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Login</b> <span class="caret"></span></a>
    <div id="demo" class="dropdown">
        <ul id="loginbtn" class="dropdown-menu">
            <li>
                <form>
                    Login form
                </form>
                <a href="#" id="register">Register</a>  
            </li>
        </ul> 

        <ul id="signupbtn" class="dropdown-menu hidden">
            <li>
                <form>
                    Register form
                </form>

                <a href="#" id="login">Login</a>        
            </li>
        </ul>
    </div>

<强>的js ：

$(document).ready(function(){
        $("#register").click(function(e){
            e.preventDefault();
            $('#loginbtn').addClass('hidden'); 
            $('#signupbtn').removeClass('hidden');
            return false;
        });
    });

    $(document).ready(function(){
        $("#login").click(function(e){
            e.preventDefault();
            $('#loginbtn').removeClass('hidden'); 
            $('#signupbtn').addClass('hidden');
            return false;
        });
    });

bootstrap中的弹出框无法正常工作

1 个答案: