jquery - ajax调用成功后如何显示侧边栏

Question

我正在使用 ajax 在侧边栏上显示数据。我可以用一个按钮显示侧边栏，但我试图在成功加载新数据后显示它，而不是再次单击该按钮。这是我获取数据的功能

    function showAirportInfo(id) {
        var id = id;
        $.ajax({
            url: "{{route('front.getairportdetail')}}",
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            type: 'POST',
            dataType: 'html',
            success: function(data) {
                var dd = JSON.parse(data);
                $('#airportdetail').html(dd);

            }
        });
    };

这是我的切换按钮

    <a id="sidebarNavToggler" class="btn btn-sm btn-secondary" href="javascript:;" role="button"
   aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500"> Show Airport </a>

这是我的侧边栏

    <aside id="sidebarContent" class="u-sidebar" aria-labelledby="sidebarNavToggler">
  <div class="u-sidebar__scroller">
    <div class="u-sidebar__container">
      <div class="u-header-sidebar__footer-offset">
        <div class="js-scrollbar u-sidebar__body">
          <div class="u-sidebar__content u-header-sidebar__content" id="airportdetail">
            
          </div>
        </div>
      </div>
    </div>
  </div>
</aside>

ajaxcall 成功后如何打开侧边栏？谢谢你的帮助

Answer 1

我不确定您使用的是哪个侧边栏库。
但是，所有侧边栏库都支持一种切换可见性的方法。
正如他们在 https://jillix.github.io/jQuery-sidebar/ 中提到的，您可以随时触发侧边栏打开或关闭。

// Sidebar on left (default)
    $(".sidebar.left").sidebar().trigger("sidebar:open");

您可以在 $.ajax() 的成功回调方法中添加此代码段，如下所示

function showAirportInfo(id) {
        var id = id;
        $.ajax({
            url: "{{route('front.getairportdetail')}}",
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            type: 'POST',
            dataType: 'html',
            success: function(data) {
                var dd = JSON.parse(data);
                $('#airportdetail').html(dd);

                $(".sidebar.left").sidebar().trigger("sidebar:open"); // Here!!!!!
            }
        });
    };

如果问题仍未解决，请告诉我您使用的是哪个侧边栏库。