轉換不起作用

我試圖添加一個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按鈕模式外的導航欄。 –

轉換不起作用

回答

相關問題