Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   2 боковых окна и 1 .onclick (https://javascript.ru/forum/events/72605-2-bokovykh-okna-i-1-onclick.html)

Alex_GR_ 12.02.2018 01:49

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>



Буду рад любым комментариям!

рони 12.02.2018 09:28

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");
    }
  });
});

Alex_GR_ 12.02.2018 23:28

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

А куда "копать" относительно области действия click??

рони 12.02.2018 23:46

Цитата:

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

???


Часовой пояс GMT +3, время: 01:18.