Question

jQuery / Javascript不是我最强的技能，所以我要求一些帮助。我正在寻找的是一旦你点击一个图像，一个搜索栏出来并延伸到图像的左侧。再次单击图像时，它会缩回。我知道可以使用几行Javascript来完成，但我很难将它们放在一起。

如果你去了我创造的小提琴here，你会看到我在导航栏中谈论的图像是放大镜。这就是我要点击的内容，以便它向左延伸。我希望它可以扩展到社交媒体，电子邮件和登录按钮，但不会太多。

要了解我想要的更多信息，请访问here。这正是我想要的各种方式......更适合我的网站。

CSS底部的＃tools-nav .search 是搜索部分。

我的导航CSS有：

/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}

#navi a:hover {
background: white;
color: #1e416f;
}

#navi .logo {
margin: 0;
padding: 0;
float: left;
}

#navi .logo a {
float: left;
width: 56px;
height: 40px;
background: url(/imgs/navi/caul_white_nav.png) center no-repeat;
text-indent: -9999px;
}

#navi .logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat;
background-color: white;
}

#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}

#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a {
float: left;
}

#primary-nav a, #tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 40px;
}

#tools-nav a:hover {
color: #1e416f;
}

#primary-nav li:first-child a, #tools-nav li:first-child a {
border-left: 1px solid white;
}

#tools-nav {
float: right;
}

#tools-nav .icon a {
text-indent: -9999px;
}

#tools-nav .email a {
background: url(/imgs/navi/mail.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .email a:hover {
background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .twitter a {
background: url(/imgs/navi/twitter.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .twitter a:hover {
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .search a {
background: url(/imgs/navi/search.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .search a:hover {
background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center center transparent;
width: 20px;
}

我的相关HTML：

<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

<ul id="primary-nav">
    <li><a href="#">Directories</a></li>
    <li><a href="#">Committees</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">About</a></li>
</ul>

<ul id="tools-nav">
    <li class="login"><a href="#">Log In</a></li>
    <li class="email icon"><a href="#">Email</a></li>
    <li class="twitter icon"><a href="#">Twitter</a></li>
    <li class="search icon"><a href="#">Search</a></li>
</ul>
</div>

Answer 1

我不想弄乱你的代码，因为它太复杂了，无法向你显示结果。这是一个jsfiddle，其任务已实施http://jsfiddle.net/krasimir/tELy5/1/

以下是jsfiddle http://jsfiddle.net/krasimir/7R77j/8/

中实施的解决方案

想法是拥有两个类并在单击按钮后交换它们。第一个类隐藏搜索字段，第二个类显示它。如果设置过渡属性，则输入将被设置为动画。

HTML

<nav>
    <a href="#">T</a>
    <a href="#">F</a>
    <a href="#">L</a>
    <a href="#" id="search">S</a>
</nav>
<input type="text" id="search-field" class="search-field search-field-hidden" />

JS

var searchButton = document.getElementById("search"),
    searchField = document.getElementById("search-field");

searchButton.addEventListener("click", function() {
    if(searchField.className.indexOf("search-field-shown") > 0) {
        searchField.className = "search-field search-field-hidden";
        searchField.blur();
    } else {
        searchField.className = "search-field search-field-shown";
        searchField.focus();
    }        
});

CSS

nav:after {
    content: "";
    clear: both;
    display: block;
}
a {
    display: block;
    float: left;
    width: 20px;
    padding: 4px;
    text-decoration: none;
    background: #999;
    color: #FFF;
    margin: 0 1px 0 0;
    text-align: center;
}
a:hover{
    background: #000;
}
.search-field {
    border: solid 2px #999;
    position: absolute;
    top: 8px;
    display: block;
    height: 23px;
    width: 86px;
    transition: all 200ms;
    -webkit-transition: all 200ms;
}
.search-field-shown {
    left: 6px;
    width: 86px;
}
.search-field-hidden {
    left: 90px;
    width: 0px;
}

Answer 2

我使用CSS3 transition来实现您正在寻找的动画。此外，jQuery还用于在搜索<input>上切换活动类：

<强> HTML：

<li class="search icon">
    <a href="#">Search</a>
    <input type="text" />
</li>

<强> CSS：

#tools-nav li { position: relative; }

li.search input {
    outline: 0;
    border: 0;
    display: block;
    padding: 0;
    height: 40px;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li.search input.active {
    border: 1px solid gray;
    padding: 0 5px;
    width: 151px;
    left: -151px;
}

<强> JavaScript的：

jQuery(function($) {
    $('li.search').find('a').on('click', function(e) {
        e.preventDefault();
        $(this).next('input').toggleClass('active');
    });
});

以下是 Edited Fiddle 。

更新

由于旧的Web浏览器不支持CSS3 transition属性，您可能需要考虑使用jQuery .animate()方法来实现动画。

在这种情况下，我们不需要在.active类声明CSS样式。

以下是 Working Fiddle 。

在适合我的网页的链接上展开搜索栏

2 个答案:

更新