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を追加することはできませんでした：＆quot; f：NO :: P17_LOCATION_ID：17＆quot;）、しかしどういうわけか場所IDを追加する必要があります（＃17 など）をリンクの最後に追加します： http://www.mysite.com/somepage.htm#17 。スクリプトはこのURLを取得し、場所IDが 17 であることを確認し、 href の最後にIDが見つかったらベルギーの子メニューを開きます（この使用したセレクタのjQueryリファレンス）。
• Edit＃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ツリーのベースまでのすべての親を検索します。

EDIT1：上記は真実ですが、子供ではなく要素の親をクリックするように指示します-私は眼鏡をかけています：

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

so $（this）.children（）。ここでやりたいことをするコード。

変更：

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

これは、親から.parent_menuアイテムの子を選択します。これは、「すべての.parent_menuアイテムとその中のすべての.child_menu」と言います。

to

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

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

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

Edit2：片側のメモ：.clickイベントを持っているクラスが各親（parent1、parent2など）に適用されるか、parent1、parent2などの親に適用され、スコープが変更されるかどうかは不明です.clickイベントキャプチャでは、クラスがparent1、parent2などのレベルで適用されることを想定しています。