【发布时间】：2015-08-07 04:36:13
【问题描述】：
当一个子菜单打开时，除了当前菜单之外的所有子菜单都应该关闭。
我希望搜索出现在文本框中并打开所有包含该值的项目并更改<a>的颜色
我写了这段代码：
$(document).ready(function(){
$("#navigation").click(function () {
$(this).next().slideToggle();
});
$("#main-menu>ul>li a ").click(function () {
$(".submenu").slideUp();
$(this).next().slideToggle();
});
$("#main-menu>ul>li>a ").click(function(){
//$(this).toggleClass("current");
});
});@font-face {
font-family: 'casa';
src: url('Fonts/Mj_Casablanca.eot?#') format('eot'), url('Fonts/Mj_Casablanca.woff') format('woff'), url('Fonts/Mj_Casablanca.ttf') format('truetype');
}
body
{
background:#eee;
font:normal 12px casa;
}
a
{
text-decoration:none;
}
li
{
list-style:none;
}
#main-menu li
{
text-align:right;
direction:rtl;
padding:0 2%;
}
#main-menu>ul>li >a:hover
{
background:#575757 url("../img/arrow.png") no-repeat 10px 10px;
}
#menu-search
{
background-color: transparent;
border:none;
width:80%;
text-align:right;
direction:rtl;
color: #eee;
line-height: 30px;
padding: 5px 10%;
}
input[type="text"]
{
font:normal 12px tahoma;
}
.submenu
{
display:none;
}
.current
{
color:orange !important;
}
.submenu li a
{
color:#eee !important;
padding-right:10% !important;
}
#main-menu>ul> li >a
{
border-top: 1px solid #5C5C5C !important;
}
#main-menu
{
width:230px;
background:#303030;
height:auto;
float:right;
/*max-height:400px;*/
overflow: visible !important;
padding:5px 0;
}
#main-menu>ul
{
display:block !important;
}
#main-menu>ul>li >a
{
background: url("../img/arrow.png") no-repeat 10px 10px;
}
#main-menu li a {
color:#fff;
display: block;
padding: 10px 10%;
}
#navigation
{
display:none;
}
.submenu
{
display:none;
}
#footer
{
min-height: 40px;
width: 100%;
clear: both;
background: #5C5C5C;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="main-menu">
<a href="#" id="navigation">Menu</a>
<ul>
<li>
<input type="text" name="txt" id="menu-search" placeholder="Search..."/>
</li>
<li><a href="#">Items 1</a>
<ul class="submenu">
<li><a href="#">Item1</a>
<ul class="submenu">
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
<li><a href="#">Items 4</a>
</ul>
</li>
<li><a href="#">Items2</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
<li><a href="#">Items 4</a>
</ul>
</li>
<li><a href="#">Items3</a></li>
</ul>
</li>
<li><a href="#">Items4</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
<li><a href="#">Items5</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
</ul>
<div>
<div id="footer">
</div>【问题讨论】：
-
我没有看到问题。您的代码工作正常。搜索字段在哪里？您尝试了什么？
-
点击“Item1”，然后点击“Item1”，关闭所有子菜单
-
所以如果单击不是子菜单，请在单击的选择器上使用 .not() 然后关闭 api.jquery.com/not
-
@daremachine 能否请您发帖，谢谢
标签： javascript jquery html css responsive-design