Question

我一直致力于一个项目，它几乎完全正常运作，但我还有一个障碍。

$(document).ready(function() {
$("a.shareTab").each(function(index, item) {
$(this).on("click", function() {
  $('.sharepanel' + $(item).data("panel")).animate({
    'width': 'show'
  }, 1000, function() {
    $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100);
  });
});
});

$('.shareClose').on('click', function() {
$('div.shareFade').fadeOut(100, function() {
  $('.sharePanel').animate({
    'width': 'hide'
  }, 1000);
});
});
});

当每个面板打开时，它会重叠，所以如果您打开最后一个面板然后无法打开第一个面板，是否可以添加一个切换按钮来关闭面板，如下所示。

FIDDLE

Answer 1

一种方法是在单击面板后隐藏所有面板，然后重新打开所需的面板。

$(document).ready(function() {
  $("a.shareTab").each(function(index, item) {
    $(this).on("click", function() {
      $('.sharePanel').hide();
    $('.sharepanel' + $(item).data("panel")).animate({
      'width': 'show'
    }, 1000, function() {
      $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100);
    });
   });
  });

  $('.shareClose').on('click', function() {
   $('div.shareFade').fadeOut(100, function() {
     $('.sharePanel').animate({
      'width': 'hide'
     }, 1000);
   });
  });
});

这里是Fiddle

切换打开/关闭滑动面板

1 个答案: