1

Вот фрейм: https://jsfiddle.net/ex6b8c1h/

js:

$('.newsBar').click(function() {
    $('.newsWindow').slideToggle();
});
$('.weatherBar').click(function() {
    $('.weatherWindow').slideToggle();
});

html:

<div class="newsBar"></div>
<div class="weatherBar"></div>
<div class="newsWindow"></div>
<div class="weatherWindow"></div>

css: newsWindow, weatherWindow - display:none;

Нужно применить в скрипт условные выражения if, if else, else для реакции:

Если newsWindow выполняет функцию .slideToggle, при этом weatherWindow имеет display:block; или же .show(), тогда к weatherWindow применяем .hide();

и наоборот:

Если weatherWindow выполняет функцию .slideToggle, при этом newsWindow имеет display:block; или же .show(), тогда к newsWindow применяем .hide();

Никак не получается реализовать из-за недостатка знаний.

2 ответа 2

1

display: block и none делайте не аттрибутом style, а классом, например:

.active {
  display: block;
}

И присвойте этот класс к открывающемуся диву. Проверять на активность можно кодом:

if(elem.hasClass(".active")) {
  //код когда блок активен
}
else {
  //в противном случае
}
0

Для того, чтобы проверить является ли элемент видимым вы можете использовать вот такую конструкцию:

$('...').is(':visible');

С использованием такого подхода, ваш обработчик события click для элемента newsBar будет иметь вид:

$('.newsBar').click(function() {
    $('.newsWindow').slideToggle();
    if ($('.weatherWindow').is(':visible')) {
        $('.weatherWindow').hide();
    }
});

Обработчик для события click на элементе .weatherBar можно построить по аналогии.

1
  • Спасибо большое за конструкцию с чекигом визибла и ответа в целом!
    – Roman
    Commented 9 нояб. 2015 в 11:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.