表示と非表示のdivをクリックして上 - 上部の内側にあるものJS

Question

私はそれがすべての子divを示すだろうようcerain「.toggler_btn 『をクリックの上に（』 .element_wrapper」）を表示し、divを非表示にする必要があります（「.element_wrapperを」） 1。また、2回目のクリックでそれらを非表示にする必要があります。 divとボタンのIDと親divのIDを表すdata-idとdata-parent属性を使用して、何とかしてください。

CODE：

<div id="wrapper"> 
      <div class="element_wrapper" data-id="1" data-parent="" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="1" data-parent="" >+/-</button> 
      Main Office 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     <div class="element_wrapper" data-id="3" data-parent="1" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="3" data-parent="1" >+/-</button> 
      Room 203 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     <div class="element_wrapper" data-id="6" data-parent="3" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="6" data-parent="3" >+/-</button> 
      Table 2 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     </div> 
     </div> 
     <div class="element_wrapper" data-id="4" data-parent="1" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="4" data-parent="1" >+/-</button> 
      Room 256 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     <div class="element_wrapper" data-id="7" data-parent="4" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="7" data-parent="4" >+/-</button> 
      Table 3 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     </div> 
     </div> 
     </div> 
     <div class="element_wrapper" data-id="2" data-parent="" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="2" data-parent="" >+/-</button> 
      Not So Main Office 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     <div class="element_wrapper" data-id="5" data-parent="2" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="5" data-parent="2" >+/-</button> 
      Room 301 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     <div class="element_wrapper" data-id="8" data-parent="5" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="8" data-parent="5" >+/-</button> 
      Table 13 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button">Edit</button> 
      <button class="delete_btn" type="button">Delete</button> 
     </div> 
     </div> 
     </div> 

</div> 

<script> 
    $(document).ready(function() { 
     $('div[data-parent=""]').show(); 
    }); 

    $(document).ready(function() { 
     $('.toggler_btn').on('click', function (event) { 
      var btn = $('.toggler_btn'); 
      var elem = $('.element_wrapper'); 
      if (btn.data('id') == elem.data('id')) { 
       elem.show(); 
      } 
     }) 
    }); 

</script> 

Answer 1

は非常にあなたの質問を理解しないでください。たぶんあなたはこれを試して、それがあなたが探しているものかどうかを見ることができます。

$('.toggler_btn').on('click', function() { 
    var id = $(this).attr('data-id'); 
    // Show or hide all child elements of the button clicked 
    $('.element_wrapper[data-parent="' + id + '"]').toggle(); 
}); 

p.s.私はまだ

Answer 2

私は相対的なアイテムを作るためにthisとsiblingsを使用したいこれをテストしていません。現在、最初の要素を取り出して、それに基づいて切り替えようとしています。さらに、コンテンツと呼ばれるクラスの中にコンテンツをラップしました。

$(document).ready(function() { 
 
    $('div[data-parent=""]').show(); 
 
    
 
    $('.toggler_btn').on('click', function (event) { 
 
     $(this).siblings().toggle() 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="element_wrapper" data-id="1" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="1" data-parent="" >+/-</button> 
 
    <div class="content"> 
 
    Main Office 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    </div> 
 
<div class="element_wrapper" data-id="3" data-parent="1" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="3" data-parent="1" >+/-</button> 
 
    <div class="content"> 
 
    Room 203 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    </div> 
 
<div class="element_wrapper" data-id="6" data-parent="3" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="6" data-parent="3" >+/-</button> 
 
    <div class="content"> 
 
    Table 2 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="element_wrapper" data-id="4" data-parent="1" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="4" data-parent="1" >+/-</button> 
 
    <div class="content"> 
 
    Room 256 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    </div> 
 
<div class="element_wrapper" data-id="7" data-parent="4" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="7" data-parent="4" >+/-</button> 
 
    <div class="content"> 
 
    Table 3 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
<div class="element_wrapper" data-id="2" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="2" data-parent="" >+/-</button> 
 
    Not So Main Office 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
<div class="element_wrapper" data-id="5" data-parent="2" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="5" data-parent="2" >+/-</button> 
 
    Room 301 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
<div class="element_wrapper" data-id="8" data-parent="5" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="8" data-parent="5" >+/-</button> 
 
    Table 13 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
</div> 
 
</div> 
 
</div> 
 

 
</div>

Answer 3

HTML構造内のネストがdata-parent属性のないクリアな親/子関係を作る（少なくとも、それが示されている例の場合と）、あなただけの組み合わせを使用することができますので、 .closest()と.find()（すべての子孫を取得するため）または.children()（直接の子の場合のみ）クリックされたボタンのラッパー内にあるネストされた.element_wrapper要素を取得します

$(document).ready(function() { 
 
    $('div[data-parent=""]').show(); 
 

 
    $('.toggler_btn').on('click', function(e) { 
 
    $(this).closest(".element_wrapper").children(".element_wrapper").toggle(); 
 
    }); 
 
});

div { margin: 5px 15px; border: thin black solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="element_wrapper" data-id="1" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="1" data-parent="">+/-</button> Main Office 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    <div class="element_wrapper" data-id="3" data-parent="1" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="3" data-parent="1">+/-</button> Room 203 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     <div class="element_wrapper" data-id="6" data-parent="3" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="6" data-parent="3">+/-</button> Table 2 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     </div> 
 
    </div> 
 
    <div class="element_wrapper" data-id="4" data-parent="1" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="4" data-parent="1">+/-</button> Room 256 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     <div class="element_wrapper" data-id="7" data-parent="4" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="7" data-parent="4">+/-</button> Table 3 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="element_wrapper" data-id="2" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="2" data-parent="">+/-</button> Not So Main Office 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button">Edit</button> 
 
    <button class="delete_btn" type="button">Delete</button> 
 
    <div class="element_wrapper" data-id="5" data-parent="2" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="5" data-parent="2">+/-</button> Room 301 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     <div class="element_wrapper" data-id="8" data-parent="5" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="8" data-parent="5">+/-</button> Table 13 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button">Edit</button> 
 
     <button class="delete_btn" type="button">Delete</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>