Переключение между панелями

Я пытаюсь реализовать решение, которое требует переключения между двумя независимыми панелями, входом и регистрацией.

Каждая панель должна иметь следующие характеристики: 1- Они отображаются только при нажатии ссылки на панели навигации; 2- В любой момент должна отображаться только одна из них, что позволяет переключаться между ссылками, которые их активируют; 3- Они должны иметь ссылку «X» в правом верхнем углу, позволяющую закрыть панель; 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/

Может ли кто-нибудь помочь мне с этой проблемой? Благодарю вас!


javascript toggle twitter-bootstrap panels
person Marcelo Martins    schedule 26.10.2015    source источник
comment
Можете ли вы описать проблему, с которой вы столкнулись?   -  person devlin carnate    schedule 26.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Самым простым решением было бы просто вызвать функцию 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");
});

теперь функциональность для «щелчка снаружи» элемента немного сложнее, потому что вам нужно прослушивать событие щелчка для каждого элемента, кроме имеющихся у вас переключателей. Один простой способ сделать это - поместить прослушиватель событий "переключить закрыто" на окно в целом и остановить распространение на ваших переключаемых элементах. Просто имейте в виду, что вы не сможете размещать прослушиватели событий на родительских элементах с применением остановки распространения в будущем и ожидать, что они будут работать:

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

плюс добавьте это ко всем переключателям:

$("#toggleSignUpPanel").click(function (e) {
    e.stopPropagation();
    $("#SignInPanel").slideUp("slow");
    $("#SignUpPanel").slideToggle("slow");
});
person wesww    schedule 26.10.2015
comment
Это замечательно! Спасибо! Но как мне добавить кнопку закрытия, например X в правом верхнем углу, а также иметь функциональность, которая закрывает любые открытые панели, когда пользователь щелкает где-либо еще на экране, скажем, содержимое под панелью? - person Marcelo Martins; 26.10.2015