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类，但这不起作用。它可以打开盒子，但不会对我的关闭动作做出反应。我也尝试过切换所有东西，因为它是一个较短的javascript，但也没有用。我究竟做错了什么？谢谢你的帮助。

Answer 1

您可以使用toggle（），如

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

如何更改使用类访问的div标签的可见性？

1 个答案: