在點擊時顯示和隱藏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>