Суть обращения.
Есть 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>
Буду рад любым комментариям!
