我尝试为搜索、语言和联系选项创建一个小标题导航。 (下面的演示)
所有元素都是可点击的。我无法管理内容滑入、移动其他图标并在单击任何其他元素时滑回。
PS:搜索栏已经在我的 jquery、jquery ui 文档中工作，可以滑入和返回(在 JSFiddle 上不起作用，不知道为什么..，但 p 标签无法滑入。搜索栏正在使用代码像这样:
$(function () {
$(".lupeIcon").click(function (){
$(".searchField").addClass("searchFieldWidthExtender",2000)
$(".telefonField").hide("slide", {direction: "right"}, 2000);
$(".globusField").hide("slide", {direction: "right"}, 2000);
});
});
)
这是代码
HTML:
<body>
<nav>
<div class="navIcon telefonIcon"><p class="telefonField">12 346 5</p><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="navIcon lupeIcon"><input class="searchField" type="text" name="search"><i class="fa fa-search" aria-hidden="true"></i></div>
<div class="navIcon globusIcon"><p class="globusField">DE | EN</p><i class="fa fa-globe" aria-hidden="true"></i></div>
</nav>
</body>
CSS:
div.navIcon{
float: left;
margin: 0 40px 0 0;
line-height: 95px;
padding: 0;
font-size: 20px;
color: red;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
display: -webkit-box;
}
.searchField {
display: none;
height: 30px;
margin: 0 10px 0 0;
border: none;
border-radius: 30px;
box-shadow: inset 0 0 2px red;
}
.telefonField, .globusField {
display: none;
height: 30px;
margin: 0 10px 0 30px;
vertical-align: middle;
}
Javascript:
$(".telefonIcon").click(function (){
$(".telefonField").addClass("displayInliner",2000)
$(".telefonField").show("slide", {direction: "right"}, 2250);
$(".searchField").hide();
$(".globusField").hide("slide", {direction: "right"}, 2000);
});
$(".lupeIcon").click(function (){
$(".searchField").addClass("searchFieldWidthExtender",2000)
$(".searchField").show("slide", {direction: "right"}, 2250);
$(".telefonField").hide("slide", {direction: "right"}, 2000);
<!-- $(".globusField").hide("slide", {direction: "right"}, 2000); -->
$(".globusField").hide();
});
$(".globusIcon").click(function (){
$(".globusField").addClass("displayInliner",2000)
$(".globusField").show("slide", {direction: "right"}, 2250);
$(".telefonField").hide("slide", {direction: "right"}, 2000);
$(".searchField").hide("slide", {direction: "right"}, 2000);
});
最佳答案
我制作了您的联系人菜单动画。
我玩得很开心。
我这样做是因为我觉得你想要的效果很棒...
您会注意到我对您的代码进行了很多更改。
我真的不知道如何一一解释所有的变化，所以请随意询问。
看看我的CodePen .
HTML
<body>
<nav>
<div class="field telefonField">12 346 5</div>
<div class="navIcon telefonIcon">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="field searchField">
<input type="text" name="search">
</div>
<div class="navIcon lupeIcon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="field globusField">DE | EN</div>
<div class="navIcon globusIcon">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</nav>
</body>
CSS
div.navIcon {
float: left;
line-height: 95px;
padding: 0;
font-size: 20px;
color: red;
}
.fa{
float: left;
line-height: 95px;
color: red;
padding: 0 6px;
}
.telefonField,
.searchField,
.globusField {
float:left;
display:none;
width: 0;
margin: 0;
color: red;
white-space:nowrap;
overflow:hidden;
line-height: 95px;
}
.searchField input{
border: none;
width:0px;
border-radius: 30px;
box-shadow: inset 0 0 2px red;
outline: none;
padding: 0.3em 0.5em 0.1em 0.7em;
}
jQuery
var showDelay = 2000;
var hideDelay = 2000; // If you want to set a different hide delay
var thisWidth = 0; // Element width are different
var searchField = false; // For the input exception
$(".navIcon").click(function(){
// Execute script only if «this» is not already displayed
if( $(this).prev(".field").css("width") == "0px" ){
if( $(this).prev(".field").hasClass("telefonField") ){
thisWidth = "63px";
searchField = false;
}
if( $(this).prev(".field").hasClass("searchField") ){
thisWidth = "248px";
searchField = true;
}
if( $(this).prev(".field").hasClass("globusField") ){
thisWidth = "59px";
searchField = false;
}
// Show it!
$(this).prev(".field").animate({width:thisWidth},showDelay).show();
// Hide the others
$(".field").not( $(this).prev(".field") ).animate({width:"0px"},hideDelay,function(){
$(this).hide();
});
// Also animated the input width...
if(searchField){
$(".searchField input").show().animate({width:"225px"},showDelay);
}
}
});
关于javascript - 左右滑动元素组Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39876656/