在输入字段焦点上切换 div

发布于 2024-11-02 23:22:03 字数 348 浏览 1 评论 0原文

我有这样的 HTML：

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

当输入字段获得焦点时，我需要它隐藏“导航”div，然后在文本字段不再获得焦点时使其重新出现。

我曾多次尝试通过 CSS 来完成此任务，这比 Javascript 更容易，但没有成功。淡入淡出的效果也会很好。

任何帮助表示赞赏。

原文

I have HTML like this:

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

When the input field is focused, I need it to hide the "navigation" div and then make it reappear when the text field is no longer focused.

I've tried multiple times to accomplish this through CSS which would be easier than Javascript but with no success. A fade effect would be nice as well.

Any help is appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨小墨 2024-11-09 23:22:03

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

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

回复收藏 0 原文

℉絮湮 2024-11-09 23:22:03

这可以使用 JavaScript 的超集 jquery 来完成。您可以在 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 不起作用，如果没有您尝试过的更多内容，我不确定。

This can be done with jquery, a superset of javascript. You can learn about it (and download the .js files) at http://jquery.com

or you can do with with 'straight' javascript like this:

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

Your fade effect and manipulating these and other dom objects gets a lot easier with jquery, but this will get you moving for now..

edit after your comment that the transition is too 'snappy' I thought to offer this:

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

by wrapping the navigation div in an outer div that is of fixed size the other elements on the page won't "jump around" when the navigation div becomes hidden. doesn't give you your fade, but does provide a cleaner UX. Of course, your mileage may vary. As for why the jquery didn't work, I am not sure without more of what you tried.

回复收藏 0 原文

~没有更多了~