Question

我正在尝试实施一个解决方案，需要在两个独立的面板之间切换，登录和注册。

每个小组应具有以下特征： 1-仅在单击导航栏中的链接时显示它们; 2-在任何给定时刻只应显示其中一个，允许在激活它们的链接之间切换; 3-他们应该有一个＆＃34; X＆＃34;右上角的链接允许关闭面板; 4-如果用户单击页面内容，则任一面板都将缩回。

这是HTML：

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-default">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="home"><!--HOME ANCHOR--></a>
                <img src="http://placehold.it/190x40" style="padding-top: 5px;" />
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-default">
                <ul class="nav navbar-nav navbar-right">
                    <li><a id="toggleSignInPanel" class="no-border noto-sans" href="#SignInPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign In</a></li>
                    <li><a id="toggleSignUpPanel" class="no-border noto-sans" href="#SignUpPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign Up</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <br />
    <br />

    <div id="upper">          
        <div id="SignInPanel">
            <div class="clearfix"></div>
            <div class="col-lg-12">
                <div class="col-md-6 col-sm-6"><h2>Sign In Left Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 1" /></div>
                <div class="col-md-6 col-sm-6"><h2>Sign In Right Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 2" /></div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div id="SignUpPanel">
            <div class="clearfix"></div>
            <div class="col-lg-12">
                <div class="col-md-6 col-sm-6"><h2>Sign Up Left Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
                <div class="col-md-6 col-sm-6"><h2>Sign Up Right Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div id="lower">
        <p>This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly. This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly.</p>
    </div>

这是Javascript：

//Toggle Sign In Panel
$(document).ready(function(){
    $("#toggleSignInPanel").click(function(){
        $("#SignInPanel").slideToggle("slow");
    });
});

//Toggle Sign Up Panel
$(document).ready(function(){
    $("#toggleSignUpPanel").click(function(){
        $("#SignUpPanel").slideToggle("slow");
    });
});

这是我到目前为止的JSFiddle：http://jsfiddle.net/UXEngineer/qawccvbs/1/

有人能帮我解决这个问题吗？谢谢！

Answer 1

最简单的解决方案是在每次切换新的面板时调用api函数关闭所有其他面板。（另外，您不需要在新的document ready调用中包装每个函数。）

//Toggle Panel
$(document).ready(function () {
    $("#toggleSignInPanel").click(function () {
        $("#SignInPanel").slideToggle("slow");
        $("#SignUpPanel").slideUp("slow");
    });
    $("#toggleSignUpPanel").click(function () {
        $("#SignInPanel").slideUp("slow");
        $("#SignUpPanel").slideToggle("slow");
    });
});

这是一个新的小提琴，在打开一个新面板时会关闭另一个面板： http://jsfiddle.net/za1L1m77/

[编辑：]

关闭按钮很简单，您可以像上面那样做：

$("#closingButton").click(function () {
    $("#SignInPanel").slideUp("slow");
    $("#SignUpPanel").slideUp("slow");
});

现在，元素“click outside”的功能有点棘手，因为你必须在除了切换之外的每个元素上听一个click事件。一种简单的方法是在窗口上放置一个“toggle closed”事件监听器，并停止对切换元素的传播。请记住，您将无法将事件监听器放在未来应用停止传播的元素的父元素上，并期望它们能够工作：

$('html').click(function() {
    $("#SignInPanel").slideUp("slow");
    $("#SignUpPanel").slideUp("slow");
});

加上将其添加到所有切换中：

$("#toggleSignUpPanel").click(function (e) {
    e.stopPropagation();
    $("#SignInPanel").slideUp("slow");
    $("#SignUpPanel").slideToggle("slow");
});

在面板

1 个答案: