如何在按钮单击时显示和隐藏部分视图？

Question

我想在单击同一个按钮时显示和隐藏我的局部视图。 下面的代码用于显示部分视图。如果用户再次单击同一个按钮，如何删除部分视图？

<div id="myPartialView"></div>

$('#myBtn').click(function() {
  $.ajax({
    url: '/Home/GetData',
    datatype: "html",
    type: "GET",
    cache: false,
    success: function(result) {
      $('#myPartialView').empty();
      $('#myPartialView').html(result)
    },
    error: function(xhr, status, error) {
      var errorMessage = xhr.status + ': ' + xhr.statusText;
      alert('error - ' + errorMessage);
    }
  });

  return false;
});

Answer 1

我将myPartialView 缓存到一个变量中，因此我们只需查找一次。

编辑：

更改了代码以测试:empty，因此即使在初始状态下它也应该可以工作。

$('#myBtn').click(function () {
    var $myPartialView = $('#myPartialView');
    if ($myPartialView.is(':empty')) {
      $.ajax({
          url: '/Home/GetData',
          datatype: "html",
          type: "GET",
          cache: false,
          success: function (result) {
              $myPartialView.html(result);
          },
          error: function (xhr, status, error) {
              var errorMessage = xhr.status + ': ' + xhr.statusText;
              alert('error - ' + errorMessage);
          }
      });
    }
    else {
      $myPartialView.empty();
    }
    
    return false;
});