Question

我正在使用jquery.transit转换按钮单击时将侧边栏移动到视图中我几乎可以使用它，除了它出现在'leftpad'div下而不是显示在它旁边。这可能是因为我不得不在css中使用position：relative来转换工作。如果我使用固定位置，侧边栏根本不会出现，但“leftpad”元素会移动以为其创建空间。我不知道如何解决这个问题。

这是我的代码：

$('#openNav').click(function() {
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#sidebar").transition({ x: '300px', y:'0px' });
  $("#openNav").hide();
});

 $('#closeNav').click(function() {
  $("#leftpad").transition({'padding-left': "0px"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#sidebar").transition({ x: '-300px', y: '0px' });
  $("#openNav").show();
});

这是css：

#leftpad{
    padding: 0;
    margin: 0;
}

#sidebar {
    height: 100%;
    width: 300px;
    position: relative;
    z-index: 1;
    top: 0;
    left: -300px;
    overflow: hidden;
    text-align: center;
}

这是html：

<div id="leftpad">
<header role="banner" class="banner_image boxshadowM enclosure1" >
        <div class="gradient2">
            <button id="openNav"  class="button1 boxshadowM">&#9776;</button>
        <h1><strong id="sitetitle">Blockpress</strong></h1>
        <h2 id="tagline"></h2>
        </div>
  </header>
<div id="contentArea" class="boxshadowM enclosure2"></div>
</div>
 <div  id="sidebar" class="enclosure3">
   <button id="closeNav" class="button2">&times;</button>
     <nav>...</nav>
     <footer>...</footer>
</div>

Answer 1

解决方法非常简单。首先，在css中，position的值需要从relative更改为fixed。接下来，#sidebar转换中的运算符需要更改。而不是-它应该是-=。正值也是如此。我删除了y值，因为它没有做任何事情。

请参阅以下代码：

$('#openNav').click(function() {
  $("#sidebar").transition({ x: '+=300px' });
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#openNav").hide();
});

$('#closeNav').click(function() {
  console.log('closenav');
  $("#sidebar").transition({ x :'-=300px' });
  $("#leftpad").transition({'padding-left': "0"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#openNav").show();
});

如何使用jquery.transit使侧边栏移动到视图中并保持在顶部

1 个答案: