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

328
10 июня 2017, 13:08

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

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

HTML

    <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 -->

CSS

.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;
}
}

JS

 $(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/2/

READ ALSO
не срабатывает append

не срабатывает append

Почему не срабатывает append? input удаляется, но ничего не появляетсяБуду очень признателен

193
Как сделать таблицу шире окна

Как сделать таблицу шире окна

Есть широкая таблицаЕё размер должен быть шире размера окна

280
Разделить секцию на две равные части Bootstrap

Разделить секцию на две равные части Bootstrap

Ситуация следующая: необходимо разделить секцию на 2 (две) равные частиСлева белая, справа серая

543