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> Буду рад любым комментариям! |
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"); } }); }); |
рони! Огромезное спасибо! Я почему-то отбрасывал простые (из-за незнания), методы. Искал что то сложное, цыкл в цыкле.
А куда "копать" относительно области действия click?? |
Цитата:
|
Часовой пояс GMT +3, время: 01:18. |