在点击时显示和隐藏Div-JS

Question

我需要在单击“.toggler_btn”时显示和隐藏div（'.element_wrapper'），以便显示上部内部的所有子div（'.element_wrapper'）一。另外，它必须在第二次点击时隐藏它们。一切都应该以某种方式使用data-id和data-parent属性来完成，这些属性表示div的div id和父div的id和id。

的代码：

<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来使项目相对。目前，您只是获取第一个元素并尝试基于此进行切换。另外，我将这些内容包装在一个名为content的类中。

$(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>