Question

我需要在点击一个'.toggler_btn'时显示和隐藏div（'。element_wrapper'），这样就会显示在上面的所有子div（'。element_wrapper'）。此外，它必须在第二次单击时隐藏它们。一切都应该以某种方式使用data-id和data-parent属性来完成，这些属性表示div和按钮的id以及父div的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>

for k,v in final.items():
    print k,v

在Click上显示和隐藏Div - JS

3 个答案: