Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2018, 13:05
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Как проверить свёрнут ли div или нет?
Здравствуйте!
Сделал элементарное сворачивание элемента div, но оно получилось двухуровневое. Теперь мне надо проверить свёрнут или развёрнут второй уровень (точнее div под div-ом), как это сделать?
<div class="container">
                <div class="col-md-12">
                    <div class="row">
                            <div class="enter">
                                <button class='enter_btn'><i class="fas fa-user"></i></button>
                                <div class="log_reg">
                                    <a href="#" class="login">LogIn</a> /
                                    <a href="#" class="registration">Registration</a>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="col-md-12">
                    <div class="row">
                        <div class="login_activ">
                            <div class="input">
                                <input type="text" placeholder=" ... email"><br>
                                <input type="text" placeholder=" ... parol">
                            </div>
                            <button class="login_btn"><i class="fas fa-sign-in-alt"></i></button>
                            <p>If you have an account then log in! <br>If not - click registration.</p>
                        </div>
                    </div>
                </div>
            </div>

//Развёртывание/свёртывание формы LogIn;
    $('.login').click(function () {
        $('.login_activ').slideToggle(400);
    });
    
    //Развёртывание/свёртывание LogIn/Registration;
    $('.enter_btn').click(function(){
        $('.log_reg').slideToggle(300);
        //попытка проверить условие:
        if($('.login_activ').slideUp()){
            $('.login_activ').slideDown();
        }
    });
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2018, 13:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

.is(':hidden')
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2018, 14:08
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

laimas, смотрите, у меня есть вот такой CSS:
/*В ОБЫЧНОМ РЕЖИММЕ*/
.header_main {
    vertical-align: middle;
    width: 100%;
    margin: 10px 0 0;
}

.enter {
    width: 77%;
    background: #524C96;
    color: #fff;
    float: left;
    padding: 2px 10px;
}

.enter a {
    text-decoration: none;
    color: #fff;
}

.enter a:hover {
    text-decoration: underline;
    color: #fff;
}

.enter_btn {
    display: none;
    border: none;
    background: none;
}

.enter_btn i {
    color: #d6d6d6;
    font-size: 18px;
}

.enter_btn i:hover{
    transform: scale(1.1);
    transition: .1s;
}

.login_activ {
    display: none;
    background: #524c96;
    margin: 0;
    padding: 0;
    transition: .4s;
}

.login_activ input {
    border: none;
    background: #d6d6d6;
}

.input {
    display: inline-block;
    padding: 0 5px 5px;
}

.login_btn {
    vertical-align: top;
    border: none;
    background: #524C96;
    width: 25px;
    height: 46px;
    padding: 0;
    margin: 0;
}

.login_btn i {
    cursor: pointer;
    color: #d6d6d6;
    transform: scaleY(2) scaleX(1.5)
}

.login_btn i:hover {
    transform: scaleY(2.2) scaleX(1.7);
    transition: .1s;
}

.login_activ p {
    float: right;
    margin: 0;
    padding: 0 10px 0 10px;
    color: #ede6e6;
    background: #524C96;
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .enter_btn {
        display: inline-block;
    }

    .log_reg {
        display: none;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .log_reg {
        display: inline-block !important;
}


Когда расширение экрана маленькое, то появится кнопка по нажатии на которую сработает функция:
$('.enter_btn').click(function(){
     $('.log_reg').slideToggle(300);
   }
});

Дальше, по нажатию на <a href="#" class="login">LogIn</a> сработает функция:
$('.login').click(function () {
      $('.login_activ').slideToggle(400);
});

Теперь, когда я в обратной последовательности нажму на эти кнопки, всё отлично сработает и скроется - останется только кнопка <button class='enter_btn'><i class="fas fa-user"></i></button>, НО! Когда я НЕ нажму на кнопку <a href="#" class="login">LogIn</a>, а сразу нажму на enter_btn, то свернётся только:
<div class="log_reg">
      <a href="#" class="login">LogIn</a> /
      <a href="#" class="registration">Registration</a>
</div>

А блок:
<div class="login_activ">
             <div class="input">
                    <input type="text" placeholder=" ... email"><br>
                    <input type="text" placeholder=" ... parol">
             </div>
             <button class="login_btn"><i class="fas fa-sign-in-alt"></i></button>
             <p>If you have an account then log in! <br>If not - press registration.</p>
</div>

останется даже при увеличении расширения...
Вопрос, куда мне этот .is(':hidden') совать?

Последний раз редактировалось drakulawz, 14.10.2018 в 14:10.
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2018, 14:46
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Намудрил вот такое:
$('.enter_btn').click(function(){
        $('.log_reg').slideToggle(300);
        if($('.login_activ').is($('.login_activ').css({display: 'inline-block'}))){
            $('.login_activ').slideToggle();
        }
    });

Теперь по нажатию на кнопку которая разворачивает/сворачивает LogIn / Registration всё сворачивается и разворачивается за пару миллисекунд но при повторном нажатии всё повторяется - развернулось и свернулось, помогите доработать, пожалуйста!

Блин...вроде всё правильно, работает ведь и так, но вот почему оно мельтешит при клике? Как убрать это "мигание" блока?

Последний раз редактировалось drakulawz, 14.10.2018 в 14:50.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2018, 14:54
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Всё, благодарю laimas, за совет, получилось. Сразу как-то не додумался:
$('.enter_btn').click(function(){
      $('.log_reg').slideToggle(300);
      if($('.login_activ').is($('.login_activ').css({display: 'inline-block'}))){
          $('.login_activ').css({display:'none'});
      }
});
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
Сторонние библиотеки - быть или не быть? IIIEPJIOK Оффтопик 64 21.03.2009 19:39
Как проверить существование функции Aderba Общие вопросы Javascript 2 14.11.2008 16:09
Как узнать свернуто окно браузера или нет. bar-boss Events/DOM/Window 3 25.09.2008 16:09
как проверить поддеружет браузер определенное событие? GOll Элементы интерфейса 9 24.07.2008 14:40