Форум

Trues · #1 (**permalink**) 15.06.2015, 15:39

Всем доброго времени суток.

ребят не могу разобраться с фокусом почему то не работает перелазил не одну документацию. просто не выводит не alert не console.log

есть лекое подозрение на то что это из за того что я пытаюсь сделать фокус не на инпуты а на див

задача следущая

при нажатии на блок мы показываем второй блок (display:block)

при нажатии на другой любой элемент мы его скрываем пишу вот так

$('.div-one).focus(function () { 
      $('.div-two').css('display','block');
    });

не могу понять почему он его не показывает

еще одна проблема незнаю как сделать чтоб при нажатии на любой другой блок он его скрывал.

помогите пожалуйста. заранее спасибо.

ksa · #2 (**permalink**) 15.06.2015, 16:07

Сообщение от Trues

при нажатии на блок мы показываем второй блок (display:block)

при нажатии на другой любой элемент мы его скрываем пишу вот так

еще одна проблема незнаю как сделать чтоб при нажатии

При чем тут фокус...

Trues · #3 (**permalink**) 15.06.2015, 16:13

понял тебя)

если сказать другими словами то будет так

когда мы получаем фокус на див с классом div-one то мы показываем другой блок когда мы терям фокус с него то мы скрывваем второй блок

ksa · #4 (**permalink**) 15.06.2015, 16:14

Сообщение от Trues

когда мы получаем фокус на див

Расскажи мне, что нужно делать дабы "получить фокус на ДИВ"?

Trues · #5 (**permalink**) 15.06.2015, 16:19

нажать на него, перейти на него) начинаю тебя понимать.

следовательно мы нажимаем на него, а не получаем фокус, так!? так как на инпут мы можем перейти и через таб, а на див нет, так получается!?

Trues · #6 (**permalink**) 15.06.2015, 16:37

т.е. получаеться объект должен быть активным

ksa · #7 (**permalink**) 15.06.2015, 16:52

Сообщение от Trues

следовательно мы нажимаем на него, а не получаем фокус, так!?

Бинго!

Т.е. нужно обрабатывать обычный click...

Trues · #8 (**permalink**) 15.06.2015, 17:21

если рассказать по подробнее задачу то она выглядит так

есть див one-div в нем еще один див two-div

при нажатии на one-div мы отображаем two-div именно в этом блоке(так как див one-div не один)

и добавляем див фиксированным позифионированием и ширина и высота по 100%(он будет служить скрыванием блоков)

<div class='one-div'>
    <div class='two-div'>Привет</div>
</div>

<div class='one-div'>
    <div class='two-div'>Пока</div>
</div>

<div class='close'></div>

реализовал так :

$(document).ready(function(){

$('.one-div').click(function(){
  $(this).children('.two-div').css('display','block');
  $('.close').css('display','block');
});

$('.close').click(function(){
	$('.two-div').css('display','none');
	$('.close').css('display','none');
});

});

т.е. при нажатии мы показываем див, ставим закрывающий див в display block
который у нас перекрывает всю страницу кроме дива который мы показали

и при нажатии на закрывающий див мы все обратно скрываем

чесно говоря мне не очень нравится этот метод мне кажется что можно сделать правильней. Ksa что ты об этом думаешь?

Deff · #9 (**permalink**) 16.06.2015, 05:48

Вариант:

<!DOCTYPE>
<html>
<head>

<style>
.cover {
 color:red;
 position:relative;
 border-radius:5px;
 border:red solid 1px;
 width:200px;
 height:145px;
 margin:23px;
}
.one-div {
 position:absolute;
 display:none;
 left:0;right:0;
 top:0;bottom:0;
 width:50%;
 height:40%;
 margin:auto;
 padding:8px;
 color:#000;
 border-radius:5px;
 border:#000 solid 1px;
 text-align:center;
}

b[title="Закрыть"]{
  cursor:pointer;
  float:right;
  padding:2px 4px;
  color:red;
}
</style>


<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.cover').click(function(){
      $(this).find('.one-div').toggle();
   });
   $('.one-div').click(function(){return false});
   $('.one-div>b[title="Закрыть"]').click(function(){
      $(this).parents('.cover').click();
   });
});
</script>
</head>
<body>

<div class='cover'>
<div class='one-div'><b title="Закрыть">X</b>Привет</div>
</div>
<div class='cover'>
<div class='one-div'><b title="Закрыть">X</b>Пока</div>
</div>

</body>
</html>

Trues · #10 (**permalink**) 16.06.2015, 08:16

Спасибо попробую)

Форум

Справочник

Discord чат

Курсы javascript