javascript - 如何更改通过类访问的 div 标签的可见性？

Question

早上好，

我想改善用户体验。因此，如果用户单击箭头和箭头周围的框，我想滑出内容。但目前用户只能单击箭头，而不能单击框。

Html 看起来像这样:

    <div class="ALL">
       <img src="~/Images/ic_keyboard_arrow_up_black_24dp.png" alt="Arrow" id="Arrow_up" style= "display: block; margin-left: auto; margin-right: auto" />
       <img src="~/Images/ic_keyboard_arrow_down_black_24dp.png" alt="Arrow" id="Arrow_down" style= "display: block; margin-left: auto; margin-right: auto" /> 

       <div id="Part_of_ALL">
        @Html.Partial("_PartialView", Model)
       </div>

    </div>

旧 javascript，用户只需单击箭头即可向上或向下拉动框:

  $(document).ready(function () {
  $('#Arrow_down').hide();
  $('#Arrow_up').show();
  $('#escalation_model').hide();

  $('#Arrow_up').click(function () {    //change here to .ALL
      $(".ALL").switchClass("ALL", "ALL_open",0);
      $('#Arrow_up').hide();
      $('#Arrow_down').show();
      $('#Part_of_ALL').show();            
  });

  $('#Arrow_down').click(function () {    //change here to .ALL_open
      $(".ALL_open").switchClass("ALL_open", "ALL", 0);
      $('#Arrow_up').show();
      $('#Arrow_down').hide();
      $('#Part_of_ALL').hide();

  });
 });

所以，现在我想实现我的目标，我只需将 id="Arrow_down/up"的点击功能的激活更改为我的类 ALL 和 ALL_open，但这不起作用。它可以打开盒子，但不会对我的关闭 Action 使用react。我还尝试了切换所有内容，因为它的 JavaScript 较短，但也不起作用。我究竟做错了什么？感谢您的帮助。

Answer 1

你可以像这样使用toggle()

$(document).ready(function() {
  $('#Arrow_down, #Part_of_ALL').hide();
  $('#Arrow_up').show();
  $('#escalation_model').hide();

  $('.ALL').click(function() { //change here to .ALL
    $(this).switchClass("ALL", "ALL_open", 0);
    $('#Arrow_up, #Arrow_down, #Part_of_ALL').toggle();
  });
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="ALL">
  <img src="//placehold.it/64?text=UP" alt="Arrow" id="Arrow_up" style="display: block; margin-left: auto; margin-right: auto" />
  <img src="//placehold.it/64?text=DOWN" alt="Arrow" id="Arrow_down" style="display: block; margin-left: auto; margin-right: auto" />

  <div id="Part_of_ALL">
    @Html.Partial("_PartialView", Model)
  </div>

</div>