代码之家 › 专栏 › 技术社区 › BT147

在jquery中单击子菜单时如何保存父细节

parent-child drop-down-menu jquery

BT147 · 技术社区 · 16 年前

我在甲骨文apex上用jquery设计了菜单,菜单是这样的

Parent1
    child1
    child2
parent2
    child3
    child4
parent3
    child5
    child6

我的问题是,当我单击parent1时,只应显示child1和child2,但在我的示例中,每个父级都会被扩展。用户可以看到所有的孩子。这不应该发生,用户应该只能看到单击的父级和子级详细信息。

我的代码如下。

$(document).ready(function() {
    var msg = false;
    $('.dropdown_menu').click(function() {
        msg = !msg;
        if (msg)
            $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");
        else
            $('.child_menu').hide();
        return false;
    });
});

3 回复 | 直到 16 年前

Mottie 16 年前

~~如果你能提供一些HTML的话,会有很大的帮助。所以,我假设您正在使用这个HTML~~ 很抱歉,我看到你的评论。

此脚本应与您提供的HTML一起使用:

$(document).ready(function(){
 // disable links in the menu
 $('#menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  $(this).parent().find('.child_menu').toggle("slow");
  return false;
 });
});

编辑:我做了以下更改:

我只禁用了 dropdown_menu 链接,所以 child_menu 链接现在可以工作了
为了在单击新的父菜单时关闭其他子菜单,我添加了一个“活动”类,然后在单击时隐藏它。
脚本现在从子菜单查看窗口散列中的位置ID,以确定要显示哪个子菜单。我不知道你是如何改变你孩子的菜单链接的(我不能只是进去把这个ID加进去:“f:no::p17_location_id:17”),但不知何故你需要添加位置ID(比如 #17 )到链接的末尾: http://www.mysite.com/somepage.htm#17 . 脚本将获取此URL并找到位置ID 17 当比利时儿童菜单在 href (见此 jQuery reference 在我使用的选择器上)。
编辑2:忘记按您的要求单击父级以防止隐藏子级,因此现在只单击其他父级将隐藏子级。

使用此HTML(您在下面的注释中提供了):

<div id="menu">
 <div class="parent_menu">
  <a class="dropdown_menu" href="f:P17_LOCATION_ID:8">Belgium</a>
  <div class="child_menu">
   <li>
    <a href="f:NO::P17_LOCATION_ID:17">Ch1</a>
   </li>
   <li>
    <a href="f:NO::P17_LOCATION_ID:27">Ch2</a>
   </li>
  </div>
 </div>

 <div class="parent_menu">
  <a class="dropdown_menu" href="f?p=102:17:100173801651673::NO::P17_LOCATION_ID:35">Germany</a>
  <div class="child_menu">
   <li>
    <a href="f?p=102:17::NO::P17_LOCATION_ID:36">Ch3</a>
   </li>
   <li>
    <a href="f?p=102:17:NO::P17_LOCATION_ID:37">Ch4</a>
   </li>
  </div>
 </div>

</div>

使用此脚本:

$(document).ready(function(){
 // disable accordion links in the menu
 $('.dropdown_menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // get current location ID from window hash
 var hid = window.location.hash;
 hid = hid.substring(1,hid.length);
 // find and open child menu that matches the ID
 $('.child_menu a[href$="' + hid + '"]').closest('.child_menu').addClass('active').slideDown("slow");
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  // prevent hiding the child menu if it's already open
  if ($(this).parent().find('.child_menu').hasClass('.active')) return false;
  // find previously active menu and close it and open current one
  $('.active').removeClass('active').slideUp("slow");
  $(this).parent().find('.child_menu').addClass('active').toggle("slow");
  return false;
 });
});

最后,您刚刚在注释中添加的脚本,除非您也提供HTML,否则我无法对其执行任何操作。

Alex Bagnolini 16 年前

尝试:

$(document).ready(
    function(){ 
      var msg = false; 
      $('.child_menu').click(
         function() { 
           msg = !msg; 
           if (msg) 
             //I have only ONE parent. Pick him, and all his children.
             $(this).parent().find('.child_menu').slideDown("slow"); 
           else 
             $('.child_menu').hide(); 
           return false; 
          }
       ); 
     }
);

Mark Schultheiss 16 年前

把父母变成单亲。虽然两者都找到元素的取消者,但作用域是不同的。

.parent()仅搜索直接父级。

.parents()查找到DOM树基部的所有父级。

Edit1:我一定是个哑巴,虽然上面说的是真的,但你指的是单击元素的父元素,而不是子元素-现在我戴上眼镜了:

.children()将是正确的选择器(当然是从子对象的父对象,如您所指出的)。

所以$(this).children()。代码来做你想做的事情。

变化:

 $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");

这将从我的父菜单中选择.parent_菜单项子菜单项,其中显示“所有.parent_菜单项和所有.child_菜单”。

到

$(this).children().slideDown("slow");

这只选择我的(这个)直系子女。如果您碰巧有其他孩子(其他班级),您还可以指定它:

$(this).children('.child_menu').slideDown("slow");

edit2:一方面注意:不清楚您所拥有的类是在每个父级(parent1、parent2等)应用了click事件,还是在parent1、parent2等的父级应用了click事件,这将更改的范围。单击事件捕获,我假设该类是在parent1、parent2等级别应用的。