Question

我有这样的HTML：

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

当输入字段被聚焦时，我需要它来隐藏“导航”div，然后在文本字段不再聚焦时重新出现。

我已经多次尝试通过CSS实现这一点，这比Javascript更容易但没有成功。淡化效果也会很好。

感谢任何帮助。

Answer 1

<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>

Answer 2

这可以通过jquery来完成，jquery是javascript的超集。您可以在http://jquery.com

了解它（并下载.js文件）

或者您可以使用这样的'直接'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>

使用jquery，你的淡入淡出效果和操纵这些和其他dom对象会变得更容易，但这会让你现在感动..

在您发表评论后，

编辑过渡过于'snappy'我想提供这个：

<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隐藏时，页面上的其他元素将不会“跳转”。不会给你你的褪色，但确实提供了一个更干净的用户体验。当然，您的里程可能会有所不同。至于为什么jquery不起作用，我不确定你没有更多的尝试。

在输入字段焦点上切换div

2 个答案: