Переключить div на фокусе поля ввода - PullRequest
Новая
       17

Переключить div на фокусе поля ввода

0 голосов
/ 20 апреля 2011

У меня есть HTML-код, подобный следующему: 

<div id="navigation">
     <ul>...</ul>
</div>
<div id="header-search">
     <input id="search-input" type="text" />
</div>

Когда поле ввода сфокусировано, оно мне нужно, чтобы скрыть div «navigation» и затем заставить его появляться, когда текстовое поле больше не фокусируется.1004 *

Я несколько раз пытался сделать это с помощью CSS, который был бы проще, чем Javascript, но безуспешно.Эффект затухания также был бы неплохим.

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 20 апреля 2011

Это можно сделать с помощью jquery, расширенного набора javascript. Вы можете узнать об этом (и загрузить файлы .js) по http://jquery.com

или вы можете сделать с 'прямым' JavaScript следующим образом: 

<head>
    <title></title>

    <script type="text/javascript">
        function hideNav() {
            var nav = document.getElementById("navigation");
            nav.style.display = "none";
        }

        function showNav() {
            var nav = document.getElementById("navigation");
            nav.style.display = "";
        }

    </script>
</head>
<body>
<div id="navigation">
     <ul><li>something</li><li>something else</li></ul>
</div>
<div id="header-search">
     <input id="search-input" type="text" onfocus="hideNav();" onblur="showNav();" />
</div>
</body>
</html>

Ваш эффект затухания и манипулирование этими и другими объектами DOM намного проще с jquery, но это заставит вас двигаться ..

edit после вашего комментария, что переход слишком «быстрый», я подумал предложить это: 

<div id="container" style="width:150px;height:150px;">
<div id="navigation">
     <ul><li>something</li><li>something else</li></ul>
</div></div>

Оборачивая навигационный div во внешний div фиксированного размера, другие элементы на странице не будут «прыгать», когда навигационный div станет скрытым. не дает вам исчезнуть, но обеспечивает более чистый UX. Конечно, ваш пробег может отличаться. Что касается того, почему jquery не сработал, я не уверен без того, что вы пробовали.

0 голосов
/ 20 апреля 2011 
<script type="text/javascript">
function showNav(show) {
  if (show) {
    document.getElementById('navigation').style.display = '';
  } else {
    document.getElementById('navigation').style.display = 'none';
  }
}
</script>
<div id="header-search">
     <input id="search-input" type="text" onblur="showNav(true)" onfocus="showNav(false)"/>
</div>
...