如何点击<li>关闭所有其他</li> <li>元素</li>

时间:2014-09-14 16:32:43

标签: jquery menu onclick html-lists

大家好我有一个问题得到一个ul li memu里面有一个div里面的li点击一个li菜单我想关闭另一个li菜单怎么做jquery请帮助这里是元素的结构。

<div id="mainmenu" class="menu_container">
                <label class="mobile_collapser">MEN&Uuml;</label>
                <!-- Mobile menu title -->
                <ul>
                     <li class="active"><a href="http://www.website.de">Home</a></li>
                     <li><a>Philosophie</a>
                     <div class="dmui_dropdown_block full_width" style="background-image: url(images/write-feather-icon.png); background-repeat:no-repeat; background-position:right;">
                     <a class="close" style="margin-top: 5px; margin-right: 10px;">x</a>
                               <div class="dmui-container">
                                    <div class="dmui-col span3">
                                         <div class="dmui-container">
                                              <ul class="dmui-submenu">
                                                   <li><a href="home_alternative.html">Kundenzufriedenheit</a></li>
                                                   <li><a href="page_alternative.html">Preiswürdigkeit</a></li>
                                                   <li><a href="gallery.html">Unterstützend</a></li>
                                                   <li><a href="portfolio_item.html">Nachhaltig</a></li>
                                                   <li><a href="portfolio_item_2.html">Verbindlich</a></li>
                                              </ul>
                                         </div>
                                    </div>
                                    <div class="dmui-col span3">
                                         <div class="dmui-container">
                                              <ul class="dmui-submenu">
                                                   <li><a href="single_post.html">Philosophie</a></li>
                                                   <li><a href="404.html">Qualitätskriterien</a></li>
                                                   <li><a href="register.html">Gemeinschaftlich</a></li>
                                                   <li><a href="elements.html">Umweltbewusst</a></li>
                                                   <li><a href="documentation/index.html">Leistungsorientiert</a></li>
                                              </ul>
                                         </div>
                                    </div>
                               </div>
                          </div>
                     </li>
                 </ul>
             </div>

对不起这里的家伙是我的Jquery试用过这个版本但没有任何帮助吗? 在这里再次编辑是完整的代码,但仍然没有工作可以请求帮助?

$(function(){

"use strict";    

var $menu = $('.menu_container'),
    $menu_ul = $('ul', $menu),
    $colapser = $('.mobile_collapser', $menu);

$colapser.on('click', function(){
    $menu_ul.toggleClass('collapsed');
})

var lihasdropdown = $('.menu_container ul li').has( ".dmui_dropdown_block" );
$(lihasdropdown).addClass('has-dropdown');

$(lihasdropdown).on('click', function(){
    $(this).children(".dmui_dropdown_block").toggleClass('show');
    $(this).children(".dmui_dropdown_block").children(".dmui-container").toggleClass('show');
    //insert by me perhaps false              $.not(this).children(".dmui_dropdown_block").removeClass('show');

})

});

1 个答案:

答案 0 :(得分:0)

刚刚创建了一个小提琴:Fiddle

$(".dmui-submenu").click(function (event)
 {
 event.preventDefault();
 var pos = $(this).closest("ul.dmui-submenu").index(".dmui-submenu");
 if(pos === 1)
 {
    $(".dmui-submenu:eq(0)").hide();
 }
 else
 {
  $(".dmui-submenu:eq(1)").hide(); 
 }
});

如果你有更多的子菜单,但不是最好的方法,但是为所提供的例子工作。
preventDefault()可以防止点击的链接生效。在index(".dmui-submenu")上使用$(this).closest("ul.dmui-submenu")获取与类子菜单最接近的ul的位置,:eq(x)将在位置x处选择具有类dmui-submenu的ul。

参考:http://api.jquery.com/index/http://api.jquery.com/eq-selector/http://api.jquery.com/closest/

更新:提供的答案与OP的第一版匹配; OP同时改变了2次 添加了新的Fiddle,其中包含当前提供的OP js + HTML并添加了css - classes

.show { display:block;}
.hide { display:none;}  

使用函数toggleClass('show')时,最好有一个名为show的类。否则它就不会像预期的那样工作。由于我不确定所需的结果是什么,我会这样做 - 点击&#34; Philosophie&#34;在主菜单中隐藏/显示子菜单;单击子菜单会隐藏两个子菜单。我不认为这是意图,但更新问题并提供详细信息,以便在点击哪个元素时应隐藏/显示哪个子菜单会有所帮助。我在小提琴中保留了console.log消息,也许只是看看哪些元素将被分配给变量以将其调整为结果应该是什么样的。