@LoranDeMarcus

Как сделать, чтобы Dropdown на Boostrap всегда был открыт?

Доброго времени суток, Столкнулся с 2 проблемами.

  1. В мобильной версии сайта при нажатии на Slide кнопку необходимо, чтобы Dropdown menu всегда был открыт.
  2. При нажатии на Slide кнопку, текст внутри как бы выстраивается, а должен выезжать без выстраивания, как в примере по которому делал https://bootsnipp.com/snippets/featured/navbar-lat...

<nav id="main-nav" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/" style="color: #f8f0d2;">TITLE</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-inverse side-collapse in">
        <ul class="nav navbar-nav nabvbar-menu">
            <li><a href="#" target="_blank">Something there</a>
            </li>
            <li><a href="#" target="_blank">Something there</a>
            </li>
            <li><a href="#">Something there</a></li>
            <li><a href="#">Something there</a>
            </li>
            <li><a href="#" target="_blank">Something there</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Личный кабинет</b> <span class="caret"></span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Something there</a></li>
                    <li><a href="#">Something there</a></li>
                    <li><a href="#">Something there</a></li>
                    <li><a href="#">Something there</a></li>
                    <li><a href="#">Something there</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Выход</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

.dropdown {
right: 15px;
}

.dropdown-menu {
width: 230px;
}

#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow: hidden;
background-color: rgba(255,255,255,.8);
}

#login-dp .help-block {
font-size: 12px
}

#login-dp .bottom {
background-color: rgba(255,255,255,.8);
border-top: 1px solid #ddd;
clear: both;
padding: 14px;
}

#login-dp .social-buttons {
margin: 12px 0
}

#login-dp .social-buttons a {
width: 49%;
}

#login-dp .form-group {
margin-bottom: 10px;
}

@media (max-width:768px) {
#login-dp{
    background-color: inherit;
    color: #fff;
}
#login-dp .bottom{
    background-color: inherit;
    border-top: 0 none;
}
}

@media screen and (max-width: 768px) {
.navbar-toggle {
    left: 10px;
}
.side-collapse-container {
    width: 100%;
    position: relative;
    left: 0;
    transition: left .4s;
}
.side-collapse-container.out {
    left: 200px;
}
.side-collapse {
    background: black;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 200px;
    position: fixed;
    overflow: hidden;
    transition: width .4s;
    display: flex;
    flex-wrap: wrap-reverse;
}
.side-collapse.navbar-right {
    height: 100px;
}
.side-collapse.navbar-right.dropdown {

}
.side-collapse.in {
    width: 0;
}
.navbar-nav {
    margin-left: 15px;
    margin-bottom: 0;
}
}

$(document).ready(function() {
    var sideslider = $('[data-toggle=collapse-side]'),
        sel1 = sideslider.attr('data-target'),
        sel2 = sideslider.attr('data-target-2');

    sideslider.click(function(event){
        $(sel1).toggleClass('in');
        $(sel2).toggleClass('out');
        $('.dropdown').toggleClass('open');
    });
});


https://jsfiddle.net/zg8wLdc8/4/
  • Вопрос задан
  • 428 просмотров
Пригласить эксперта
Ответы на вопрос 3
iRoschak
@iRoschak
Front-end Developer
Просто добавьте "open" там где класс "dropdown"
Ответ написан
Комментировать
daager
@daager
Пишите в куку состояние и при рендере проверяйте её и пусть блок сразу будет либо развернутый, либо нет.
Ответ написан
@devstudent
frontend-developer
в
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Личный кабинет</b> <span class="caret"></span></a>

сделать
aria-expanded="true"
вот так
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><b>Личный кабинет</b> <span class="caret"></span></a>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы