Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2018, 01:49
Новичок на форуме
Отправить личное сообщение для Alex_GR_ Посмотреть профиль Найти все сообщения от Alex_GR_
 
Регистрация: 12.02.2018
Сообщений: 2

2 боковых окна и 1 .onclick
Суть обращения.
Есть 2 боковых, выезжающих, окна ( левое и правое). В левом должна быть социальная сеть (фреймом)
В правом будут пару ссылок (иконка и текст). Подобно этому http://prntscr.com/idcs4v
Когда речь зашла за вторую (правую с текстом/ссылкой), столкнулся с трудностями.

1. И пожалуй самое важное - нет возможности нажать ссылку. (т.е. оно срабатывает как действие click на эту область).
-шурстил литературу. был вариант - задать область для действия через mousein, mouseuot. но не получилось(сложновато для меня в понимании) реализовать + не понятно как будет на моб устройствах (есть сомнения).
-Второй вариант - присвоить действия для конкретного блока(родительского) а для дочернего что бы не распространялось действие. (ресурс на котором быо подобное не найду)

2. чуть менее важное поочередное открытие этих 2 окон..
делал вложенность циклов, но что то пошло не так, не получается. Если чесно, тут пока не "отстреливаю"...

Собственно код:
$(document).ready(function() {
    $('#left_bar').click(function(){
        if ($(this).hasClass('visible')) {
            $(this).removeClass('visible');
        }
        else {
            $(this).addClass('visible');
        }
    });
});

$(document).ready(function() {
    $('#panel').click(function(){
        if ($(this).hasClass('visible')) {
            $(this).removeClass('visible');
        }
        else {
            $(this).addClass('visible');
        }
    });
});

<body>
    <div class="container">
        
        <div id="first-block"></div>
        <div id="second-block"></div>
        <div id="third-block"></div>
        <div id="fourth-block"></div>
        <div id="fifth-block"></div>

        <footer id="footer" class="footer">
            <p>какой то текст</p>
        </footer>

    </div>
   <div id="left_bar" href="javascript:void(0)" class="">
        <span></span><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=true&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        <div><i class="fa  fa-facebook-official"></i></div>
    </div>




   <div id="panel" class="">
      <div class="tiggo"><p class="fa fa-info-circle"> Fragen bleiben?</p></div>
      <div class="bar-content">
        <div class="ider kontact fa-info-circle"><a href="/">Контактформуляр</a></div>
        <div class=""><a href="#more_plested">Контактформуляр</a></div>
        <div class=""><a href="https://www.w3schools.com/jsref/event_onclick.asp">Контактформуляр</a></div>
        <div class=""><a href="#more_horizontal">Контактформуляр</a></div>
      </div>
    </div>

   
   
</body>



Буду рад любым комментариям!
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2018, 09:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,596

Alex_GR_,
блокам дать общий класс, в примере class="panel" строки 15, 23
и один скрипт, дублировать и оборачивать в ready не надо.
$(function() {
  var panel = $(".panel");
  panel.on("click", function() {
    var el = $(this);
    if (!el.closest(".bar-content").length) {
      panel.not(el.toggleClass("visible")).removeClass("visible");
    }
  });
});
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2018, 23:28
Новичок на форуме
Отправить личное сообщение для Alex_GR_ Посмотреть профиль Найти все сообщения от Alex_GR_
 
Регистрация: 12.02.2018
Сообщений: 2

рони! Огромезное спасибо! Я почему-то отбрасывал простые (из-за незнания), методы. Искал что то сложное, цыкл в цыкле.

А куда "копать" относительно области действия click??
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2018, 23:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,596

Сообщение от Alex_GR_
А куда "копать" относительно области действия click??
???
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающие окна Diphenyl Oxalate Ваши сайты и скрипты 4 13.02.2017 00:06
FancyBox: Размер модального окна больше размеров окна браузера (высота), как сделать? clgs Events/DOM/Window 3 22.01.2015 17:13
затемнение по высоте страницы, а не окна qazibum Общие вопросы Javascript 4 07.09.2012 09:37
Помогите с настройкой лайтбокс окна obormot Элементы интерфейса 1 03.02.2012 15:14
Плавное открытие окна. Flashton Элементы интерфейса 3 20.10.2010 16:00