javascript - 如何关闭其他子菜单并在菜单中搜索？-6ren

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

转载作者：搜寻专家更新时间：2023-10-31 08:54:14

24

4

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

我希望搜索出现在文本框上并打开所有包含该值的元素并更改 <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>

最佳答案

首先:将类 nested 添加到内部子菜单。并将此样式添加到类嵌套:

padding-right: 10%;

并使用这个 js:

    $(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();
});

    });

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

关于javascript - 如何关闭其他子菜单并在菜单中搜索？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30442699/

24

4

0

文章推荐： html -

 标签没有正确格式化换行符/制表符

文章推荐： HTML5/CSS3 - div id 不工作

文章推荐： javascript - 在没有某些 div 的情况下淡入背景

文章推荐： html - 使 bootstrap 列触及 div 的底部

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

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