在单击时显示和隐藏Divs -js

Question

我需要在单击cerain'.togggler_btn'时显示和隐藏divs('.element_wrapper'(，因此它将显示所有子divs('.element_wrapper'(一。另外，它必须在第二次点击时隐藏它们。一切都应以某种方式使用代表DIV的ID以及Parent Div的按钮和ID的Data-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>