0

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

3 回答 3

0

尝试：

$(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; 
          }
       ); 
     }
);
于 2009-12-01T12:33:56.220 回答
0

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

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

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

EDIT1：我一定是愚蠢的，虽然以上是正确的，但您表示要单击元素的父元素，而不是子元素 - 现在我戴上了眼镜：

.children() 将是正确的选择器（当然，正如您所指出的，来自孩子的父母。

所以 $(this).children()。代码在这里做你想做的事。

改变：

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

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

至

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

这仅选择 MY (this) 直系子女。如果您碰巧有其他孩子（其他类），您可以进一步指定它：

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

Edit2：一个旁注：目前尚不清楚您拥有 .click 事件的类是应用于每个父级（parent1、parent2 等）还是应用于 parent1、parent2 等的父级，这将改变 .click 事件的范围捕获，我假设该类应用于 parent1、parent2 等级别。

于 2009-12-01T12:42:59.603 回答
0

如果您提供一些 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并在找到末尾的 ID 时打开比利时子菜单href（请参阅我使用的选择器上的此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，否则我无能为力。

于 2009-12-01T16:29:40.070 回答