Question

我正在尝试使用，然后更改左侧边栏的左侧属性值，就像它是一个内存变量失败一样。我的基本算法是

left = (left * (-1) - 250)
Initial value of left is 0.
step #1: If left (value) is 0; then left should become -250.
step #2: If left (new value) is -250; left should then become 0.
step #3: go to step #1

在电子表格中尝试此操作，其中left是前一行的值。您的结果行应如下所示：

-250
0
-250

我正在尝试将左侧值从0切换到-250然后再切换回0。所以我的左手侧边栏是＆＃34; on＆＃34;或者＆＃34;关闭＆＃34;画布由左边确定：值。

我尝试过多种计算方法，包括

    @leftr: 0; is set at the beginning of of my CSS sheet.
    @negtv: -1; also set at the beginning of my CSS sheet.

....
@leftr: -webkit-calc(~"((@leftr * @negtv) - 250)"); /* slide-in/out 0 or -250 */
left: @leftr;

我希望这比泥更清楚，你们可以帮助我吗？提前致谢

Answer 1

使用纯CSS，AFAIK是不可能的。

考虑使用JavaScript。这是一个例子：

脚本

$('.sidebar-toggle').click(function() {
    var sidebar = $('.items');
    sidebar.css('margin-left', 0);
    if (!sidebar.hasClass('hidden'))
        sidebar.addClass('hidden'); 
    else
        sidebar.removeClass('hidden');
});

$('.sidebar-slide').click(function() {
    var sidebar = $('.items');
    var hidden = sidebar.hasClass('hidden');
    if (hidden) {
        sidebar.css('margin-left', -sidebar.width()*2);
        sidebar.removeClass('hidden');
        sidebar.animate({'margin-left': 0});
    } else  {
        sidebar.css('margin-left', 0);
        sidebar.removeClass('hidden');
        sidebar.animate({'margin-left': -sidebar.width()*2}, function() {
            sidebar.addClass('hidden');
        });
    }

});

HTML / CSS

<style>
.nav {
}
.nav a {
    cursor: pointer;
    color: navy;
    font-weight: bold;
}
.items {
    position: absolute;
    width: 100px;
    border: 1px solid black;
}

.items.hidden {
    display: none;
}
</style>
<div class="nav">
    Sidebar: 
      <a class="sidebar-toggle">Toggle</a>
    | <a class="sidebar-slide">Slide</a>
</div>
<br />
<div class="items">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

您可以在jsFiddle处尝试。

Answer 2

如果您希望在用户点击某些内容时显示侧边栏，而不使用JavaScript，则可以使用隐藏的复选框技巧。

.sidebar {
  padding:8px;
  position:absolute;
  left:-250px; top:0;
  width:234px; height:100%;
  height:calc(100% - 16px); /* sorry */
  background:#CCF;
  transition:left 1s;
}

#showsidebar {display:none}

label[for='showsidebar'] {    /* make it look like a link */
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

#showsidebar:checked ~ .sidebar {
  left:0;
}

<input type="checkbox" id="showsidebar">
<label for="showsidebar">show sidebar</label>

<section class="sidebar">
  <label for="showsidebar">hide sidebar</label>
  <h1>The sidebar!</h1>
  <p>(contents of sidebar)</p>
</section>

<h1>The main site</h1>
<p>Blabla. Something Latin.</p>

如何使用CSS CALC（）的结果更新左侧属性值

2 个答案: