Форум

ssg · #1 (**permalink**) 20.02.2013, 19:23

Здравствуйте! Вообщем такая проблема, моя форма поиска находится в выпадающем меню которое всплывает при наведении:

Код:

<li class="top_menu">
		<a href="#">Search</a>
		<ul>
<li class=""><form ......</form></li> 
</ul>

Вовремя ввода в форму если убрать курсор, меню сворачивается.
Нужно сделать так чтобы при нажатии на форму меню фиксировалась, и убиралось только после клика вне.

Каким js скриптом это можно сделать?
Все обыскал на эту тему ничего не нашел, может есть какой-то пример? Надеюсь на вашу помощь.

Deff · #2 (**permalink**) 20.02.2013, 20:02

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
 .top_menu a{
  display:block;
}
 .top_menu a>ul{
  display:none;
}
 .top_menu:hover  a>ul{
  display:block;
}
 .top_menu a ul.active {
  display:block!important;
}
.top_menu a {
  display:block;
  text-decoration:none;
}
  .top_menu form {
   color:#000;
}
</style>

<li class="top_menu" onclick="return false">
	<a href="#" onclick="return false"><u>Search</u>
		<ul>
		      <form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
		</ul>
	</a>
</li>
<script type="text/javascript">
  $(".top_menu *").focus (function() {
     $(".top_menu ul:first").addClass('active')
  }).blur(function() { 
     $(".top_menu ul:first").removeClass('active')
  });
</script>

Имхо вкуснее иная логика: Открывает - закрывает клик по "Search"
Закрывает так же клик вне формы

<!DOCTYPE HTML>
<html>
  <head> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
 .top_menu {
    display:inline-block;
  border:red solid 1px;
}
 .top_menu >ul{
  display:none;
}
 .top_menu ul.active {
  display:block!important;
}
</style>
</head>

<body style="min-height:200px;">

<li class="top_menu" onclick="return false">
	<a class="aForm" href="#" onclick="return false">Search</a>
		<ul>
		      <form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
		</ul>
	
</li>

<script type="text/javascript">
  $(".top_menu a:first").click(function() {
     $(".top_menu ul:first").toggleClass('active');
  });

  $(".top_menu").click(function() {
     return false;
  });

  $("body").click(function() {
     $(".top_menu ul:first").removeClass("active");
  });
</script>


  </body>
</html>

danik.js · #3 (**permalink**) 20.02.2013, 20:57

Deff, вкладывать активный элемент в другой активный элемент - это очень плохая идея. Как тебе вобще такое в голову приперло. Тыб еще кнопку в кнопку запихал

ssg · #4 (**permalink**) 20.02.2013, 21:13

Спасибо огромное!

danik.js · #5 (**permalink**) 20.02.2013, 21:28

Deff, первый вариант вообще не работает, я же тебе говорил. Убери его, не позорься

Форум

Справочник

Discord чат

Курсы javascript