0

Oracleapexで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ツリーのベースまでのすべての親を検索します。

編集1：私は愚かである必要がありますが、上記は真実ですが、あなたは子供ではなく要素の親をクリックするように指示します-今私は眼鏡をかけています：

.children（）は、その正しいセレクターになります（もちろん、あなたが示したように、子の親から。

したがって、$（this）.children（）。ここでやりたいことをするコード。

変化する：

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

これにより、親から.parent_menuアイテムの子が選択され、「すべての.parent_menuアイテムとその中のすべての.child_menu」と表示されます。

に

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

これは、MY（これ）の直接の子のみを選択します。他の子（他のクラス）がいる場合は、次のように指定できます。

$(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のウィンドウハッシュを調べて、表示する子メニューを決定します。子メニューのリンクをどのように変更しているかわかりませんが（「f：NO :: P17_LOCATION_ID：17」にIDを追加することはできませんでした）、どういうわけかロケーション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 に答える