转换不起作用

我试图添加一个search bar，它自己扩展到subscribe button，并且我无法使用JQuery click event延迟按钮的显示值。
如果我在js中使用另一个悬停功能，它将忽略click event，并且transitions也不起作用。
这是我的第一篇文章，所以，如果我犯了任何错误，我很抱歉。转换不起作用

这里是我的代码：

HTML：

<nav class="navbar navbar-inverse affix-top container" id="navbar"> 
        <div class="container-fluid"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <a class="navbar-brand" href="file:///C:/Users/Eren/Desktop/HTML-CSS/Project-BlackKnight/Project-BlackKnight.html?">Black Knight</a> 
         </div> 
         <div class="collapse navbar-collapse" id="myNavbar"> 
          <ul class="nav navbar-nav"> 
           <li class="active"><a href="#">Home</a></li> 
           <li class="dropdown"> 
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Page 1-1</a></li> 
             <li><a href="#">Page 1-2</a></li> 
             <li><a href="#">Page 1-3</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Page 2</a></li> 
           <li><a href="#">Page 3</a></li> 
          </ul> 
          <ul class="nav navbar-nav navbar-right hidden-xs"> 
           <div class="container-2"> 
            <span class="icon"><i class="fa fa-search"></i></span> 
            <input type="search" id="search" placeholder="Search..." /> 
           </div> 
           <li class="subs"><a data-toggle="modal" data-target="#subscribe" href="#"><span class="glyphicon glyphicon-user"></span> Subscribe</a></li> 
          </ul> 
         </div> 
        </div> 
       </nav>

CSS：

.navbar { border: none; box-shadow: none; } 

.navbar.affix {  
position: fixed;  
top: 0;  
z-index:10;  
} 

.container-2 { 
width: 200px; 
vertical-align: middle; 
white-space: nowrap; 
position: relative; 
} 

.container-2 input#search {  
width: 50px;  
height: 50px;  
background: #2b303b;  
border: none;  
font-size: 10pt;  
float: left;  
color: #262626;  
padding-left: 45px;  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
border-radius: 5px;  
color: #fff;  
-webkit-transition: width .70s ease;  
-moz-transition: width .70s ease;  
-ms-transition: width .70s ease;  
-o-transition: width .70s ease;  
transition: width .70s ease;  
} 

.container-2 input#search::-webkit-input-placeholder { color: #65737e; }  
.container-2 input#search:-moz-placeholder { color: #65737e; }  
.container-2 input#search::-moz-placeholder { color: #65737e; }  
.container-2 input#search:-ms-input-placeholder { color: #65737e; }  

.container-2 .icon {  
position: absolute;  
top: 50%;  
margin-left: 17px;  
margin-top: 17px;  
z-index: 1;  
color: #4f5b66;  
} 

.container-2 input#search:focus, .container-2 input#search:active { outline:none; width: 200px; }  
.container-2:hover+.subs{ display: none; }  
\#search { position: absolute; }  
.subs { margin-left: 45px; transition: 5s all 5s ease; } //this is the problem 
.container-2:hover input#search { width: 200px; }  
.container-2:hover .icon { color: #93a2ad; }

JS：

$('.navbar').affix ({ 
offset: { 
    top: function() { 
    return (this.bottom = $('.top-images').height()); 
} 
} 
}); 

$('#search').click(
function() { 
    $('.subs').hide(); 
} 
); 

$(document).click(
function(e){ 
    if (!$(e.target).is('#search')) { 
     setTimeout(function() { 
      $('.subs').show(); 
     }, 500); 
    } 
    if (!$(e.target).is('#search')) { 
     $('.modal').modal(toggle) 
    } 
    if ($(e.target).is('.sub-button')) { 
     $('.modal').modal(toggle) 
    } 
} 
);

如果您有任何更有效的想法，我米开放的建议。
预先感谢您！
这里是我的代码小提琴：fiddle link

来源

2016-08-17 Eren Koç

你可以在你的问题更具体吗？ –

好的问题在于：当我的搜索栏扩展时，它使订阅按钮'display = none''当它再次回来时，它会在搜索栏成功折叠并且看起来嵌套一秒之前出现。 –

因此，当订阅按钮显示时，您希望显示与转换相同的行。我对吗？ –

当您使用show/hide元素时，您可以使用delay。例如，在你的情况下，改变这种JQuery代码：

if (!$(e.target).is('#search')) { 
    setTimeout(function() { 
     $('.subs').show(); 
    }, 500); 
    }

到：

if (!$(e.target).is('#search')) { 
    setTimeout(function() { 
     $('.subs').delay(1000).fadeIn(); 
    }, 100); 
    }

而且在删除margin您li：

.navbar-nav>li { 
margin: 0; 
}

最后，这里是一个小提琴：fiddle link
你也可以用hover event制作。
我做了另一个小提琴hover： hover function
希望这是你一直在寻找！

来源

2016-08-17 08:55:47

带有'hover'的那个正好是我所需要的，但如果我可以点击'搜索栏'，它会更有用:)我不知道问题是什么以及如何解决它，但它是关于js的。 –

你的意思是封闭悬停时输入的宽度，并在点击其他地方时移除该宽度？我对吗？ –

@ErenKoç，这是你在找什么：https：//jsfiddle.net/vs36ur9L/19/ –

我不知道你想什么，但检查THI jsfiddle 我有固定的data-target='#subscribe'到data-target='#search' 检查它，让我知道还有什么你想获得

来源

2016-08-17 08:35:21

不，这不是我需要我使用subs按钮模式外的导航栏。 –

转换不起作用

回答

相关问题