如何关闭其他子菜单并在菜单中搜索？

Question

打开子菜单时，应关闭当前菜单以外的所有子菜单。

我希望搜索显示在文本框中，然后打开包含该值的所有项目并更改<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>

Answer 1

首先：将类nested添加到内部子菜单。并添加此样式 班级nested：

padding-right: 10%;

并使用此js：

＆＃13;

＆＃13;

    $(document).ready(function(){
       
$('#main-menu ul li a').on('click', function (e) {$('#main-menu ul li a').removeClass("current");$(this).toggleClass("current");$(this).next().slideToggle();
$(this).parent().siblings('li').find('ul').hide();
e.stopPropagation();
});

    });

＆＃13;

@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;

}

＆＃13;

<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 nested ">
<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 nested ">
           <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>

＆＃13;

＆＃13;

＆＃13;