单击 jquery 中的子菜单时如何保留父级详细信息

Question

我在 oracle 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;
    });
});

Answer 1

如果您提供一些 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 末尾找到 ID 时打开比利时子菜单（请参阅此 我使用的选择器上的 jQuery 参考）。
• 编辑＃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，否则我无法对其执行任何操作。

Answer 2

尝试：

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

Answer 3

只需将父母更改为单亲父母即可。虽然两者都找到元素的祖先，但范围不同。

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

.parents() 查找 DOM 树根部之前的所有父级。

编辑1：我一定是愚蠢的，虽然上面是正确的，但您指示单击元素的父级，而不是子级 - 现在我戴上了眼镜：

.children() 将是该元素的正确选择器（来自父级）当然，正如您所指出的，

因此 $(this).children(). 代码可以在这里执行您想要的操作

：

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

这将从我的父级中选择 .parent_menu 项目，其中显示“所有 .parent_menu 项目和其中的所有 .child_menu

仅选择

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

我的（此）直接子级，如果您碰巧有其他子级（其他类），您可以进一步指定它：

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

Edit2：旁注：不清楚您是否有该类。 .click 事件应用于每个父级（parent1、parent2 等）或应用于parent1、parent2 等的父级，这将更改 .click 事件捕获的范围，我假设该类应用于parent1， Parent2 等级别。