大家好，我有一个菜单和一个重叠在菜单上的搜索表单，默认情况下它是隐藏的但是当我点击搜索项时，表单出现了，我还写了一行代码来隐藏菜单项，但是菜单项和切换表单都消失了。真令人沮丧。
如果我的代码太长太无聊，我必须承认，这里似乎就是这种情况。这是我的问题的真实陈述——我创建了一个默认隐藏的表单元素，当点击搜索图标时，表单显示在菜单项上，我还写了一行代码来隐藏菜单项显示表单后，问题是单击搜索图标时，表单和搜索图标都消失了，并且表单不是菜单项的子元素。为什么会发生这种情况，谁能告诉我为什么？ 这是我的代码:
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Account
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blogs
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Guest posts</a></li>
<li><a href="#">HTML5 articles</a></li>
<li><a href="#">CSS3 articles</a></li>
<li><a href="#">JavaScript articles</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Connects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Meet an Expert</a></li>
<li><a href="#">Get your respnsive website</a></li>
<li><a href="#">Tech advice</a></li>
</ul>
</li>
</ul>
<div class="pull-right search-case">
<!-- <div class="search-bar-containter"> --->
<form class="search-form">
<label class="search-label" id="search-label"><span class="glyphicon glyphicon-search"></span></label>
<div class="search-input-container input-element" id="input-search">
<button type="button" class="for-label"><span class="glyphicon glyphicon-search"></button>
<input class="search-input" type="search" placeholder="Enter Keyword">
</div>
</form>
<!-- </div> -->
</div>
.navbar-nav.navbar-2 {
margin-right:8.33333333% ;
}
.navbar-nav.navbar-2 > li > a {
padding: 39px 5px;
font-size: 1.18em;
}
/*Definning the search styles*/
.pull-right.search-case {
width: 350px;
position: relative;
top: -70px;
/*right: 4.166666665%;*/
z-index: 1000;
}
.search-label {
width: 50px;
height: 40px;
position: absolute;
right: -10px;
cursor: pointer;
}
.search-label .glyphicon.glyphicon-search {
padding-top: 10px;
padding-left: 15px;
}
.glyphicon.glyphicon-search:hover {
color: #fff;
}
.search-input {
width: 70%;
height: 30px;
position: absolute;
right: 28%;
top: 6px;
padding-left: 3px;
background: #eee;
border-top: 2px solid #32ab32;
border-bottom: 2px solid #32ab32;
border-left: 2px solid #32ab32;
border-right: 2px solid #32ab32;
backface-visibility: none;
box-shadow: 0 0 10px rgba(78,78,78,0.4);
}
.for-label {
width: 30%;
height: 30px;
position: absolute;
right: 6px;
top: 6px;
background-color: rgba(180,180,180,0.9);
border: 2px solid #32ab32;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.search-input-container {
position: relative;
background-color: #ffa500;
height: 40px;
width: 90%;
margin-left:5px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset,
0 1px 0 rgba(225, 225, 225,.2);
transition: all 2s ease-in;
display: none;
.open {
display: block;
}
.search-input-container.open {
transition: all 0.4s ease-in;
}
.hide {
z-index: -1;
}
jQuery(document).ready(function() {
var label = $('.search-label').find('span');
var inputContainer = $('.search-input-container');
var navbar_2 = $('.navbar-2');
label.on('click', function() {
inputContainer.addClass('open')
$(this).addClass('glypihicon.glypicon-times');
navbar_2.hide();
});
});
如果我的代码太长太无聊，我必须承认，这里似乎就是这种情况。这是我的问题的真实陈述——我创建了一个默认隐藏的表单元素，当点击搜索图标时，表单显示在菜单项上，我还写了一行代码来隐藏菜单项显示表单后，问题是单击搜索图标时，表单和搜索图标都消失了，并且表单不是菜单项的子元素。为什么会发生这种情况，谁能告诉我为什么？
最佳答案
看起来您的 HTML 格式不正确。您提供的代码中缺少 span 元素。
关于jquery - 为什么在编写隐藏菜单的函数后我的表单消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42042511/