【问题标题】:Jasny Bootstrap offcanvas menu - ajax 'close' causing dismiss issueJasny Bootstrap offcanvas 菜单 - ajax 'close' 导致关闭问题
【发布时间】:2025-12-15 12:00:02
【问题描述】:

问题背景:

JSFiddle - https://jsfiddle.net/k9K5d/200/embedded/result/

我正在使用 Jasny Bootsrap 开发一个“画布外”滑出菜单。

问题:

当按下切换按钮时,菜单可以正常滑出并正常关闭。通过代码使用 ajax 调用关闭菜单时会出现问题。

在菜单中,我有一个按钮(标记为“单击”),它可以进行 ajax 调用以将一些数据附加到 div。在 ajax 调用的 Success 方法中,我调用了一个应该关闭菜单的 Jasny 'hide' 方法。

菜单确实会关闭,但视图的“主体”通常在菜单滑动之前关闭,如红色箭头所示:

守则:

以下显示了我的代码,用于调用要附加到 div 的数据,然后关闭关闭画布菜单:

$('#navBtn').click(function() {

var jsonData = {
    "values" : ["Test1", "Test2"]
    }

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data : { json: JSON.stringify( jsonData ) },
  success: function(data)
  {
    var arraySize = data.values.length;

    $('#arrayHolder').html(arraySize);

    closeMenu();
  }

});

});


function closeMenu()
{
    $('.navmenu').offcanvas('hide');
}

我提供了一个 JSFiddle 来显示这个:https://jsfiddle.net/k9K5d/200/

此问题出现在第二次单击 ajax 调用“单击”按钮时。

任何帮助找出关闭代码的 ajax 调用导致这种样式的原因都会很棒。

【问题讨论】:

    标签: javascript jquery css ajax jasny-bootstrap


    【解决方案1】:

    尝试使用.promise().done()

    $('#arrayHolder').html(arraySize).promise().done(function(){
       closeMenu();
    });
    

    【讨论】:

      【解决方案2】:

      让你的函数像这样。工作正常。

      function closeMenu()
      {
           $('.navbar-toggle').click()
      }
      

      【讨论】: