Question

我正在尝试实现下面的图表中描述的布局。

我有一个包含多行和两列信息的表。我想要的是有一个按钮（由'＆gt;'尖括号表示），点击时会导致按钮的“抽屉”从左列滑出。我希望它只是覆盖行而不会在打开时推送任何内容。如果它与行的高度相同，那将是最好的。

我在JSFiddle here中尝试过，但无法实现我所追求的目标。

HTML：

CSS

  <body>
  <table>
    <tbody>
      <tr>
        <td>Some text 1</td>
        <td>
          <div id="outer">
          <div>
          <button id="showPanel">></button>
          </div>
          <div id="buttonDrawer">
            <button>btn1</button>
            <button>btn2</button>
            <button>btn3</button>
          </div>
          </div>
        </td>
        <td>status text</td>
      </tr>
    </tbody>
  </table>
</body>

的JavaScript

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
}

#buttonDrawer {
  width: 0;
  overflow: hidden;
  position: absolute;
}

任何帮助都会受到大力赞赏。

谢谢！

Answer 1

将#buttonDrawer css更改为

#buttonDrawer {
  width: 0;
  overflow: hidden;
  position: absolute;
  white-space:nowrap;
  top:0;
  left:100%;
  bottom:0;
  background:#ccc;
  z-index:1;
}

和td

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
  position:relative;
}

工作示例

＆＃13;

$(document).ready(function() {
  $('#showPanel').click(function() {
      $('#buttonDrawer').animate({
      width: 150
      });
  });
});

＆＃13;

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
  position:relative;
}

#buttonDrawer {
  width: 0;
  overflow: hidden;
  position: absolute;
  white-space:nowrap;
  top:0;
  bottom:0;
  background:#ccc;
  left:100%;
  z-index:1;
}

#outer {
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>Some text 1</td>
      <td>
        <div id="outer">
          <div>
            <button id="showPanel">></button>
          </div>
          <div id="buttonDrawer">
            <button>btn1</button>
            <button>btn2</button>
            <button>btn3</button>
          </div>
        </div>
      </td>
      <td>status text</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

我稍微修改了一些代码，如果您对什么做了什么问题，请告诉我。

重要的是，切换到课程比使用不同名称的100个ID更容易。使用(this)来控制我们正在使用的表行。

这里是要播放的fiddle。

second fiddle滑出以覆盖而不是滑动内容到侧面。

＆＃13;

$('.showPanel').click(function() {
  if ($(this).closest('tr').find('.buttonDrawer').hasClass('open')) { // if open close it
    $(this).closest('tr').find('.buttonDrawer').removeClass('open');
    $(this).closest('tr').find('.showPanel').text('>');
  } else { // if closed open it
    $(this).closest('tr').find('.buttonDrawer').addClass('open');
    $(this).closest('tr').find('.showPanel').text('<');
  }
});

＆＃13;

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
}

.status-cell {
  display: flex;
  overflow: hidden;
}

.status-blocks {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  transition: all 0.2s ease;
}

.buttonDrawer {
  margin-left: -100%;
}

.open {
  margin-left: 0%;
}

button {
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some text 1</td>
      <td>
        <div id="outer">
          <div>
            <button class="showPanel">&gt;</button>
          </div>
        </div>
      </td>
      <td class="status-cell">
        <div class="status-blocks buttonDrawer">
          <button>btn1</button>
          <button>btn2</button>
          <button>btn3</button>
        </div>
        <div class="status-blocks">status text</div>
      </td>
    </tr>
    <tr>
      <td>Some text 2</td>
      <td>
        <div id="outer">
          <div>
            <button class="showPanel">&gt;</button>
          </div>
        </div>
      </td>
      <td class="status-cell">
        <div class="status-blocks buttonDrawer">
          <button>btn1</button>
          <button>btn2</button>
          <button>btn3</button>
        </div>
        <div class="status-blocks">status text</div>
      </td>
    </tr>
    <tr>
      <td>Some text 3</td>
      <td>
        <div id="outer">
          <div>
            <button class="showPanel">&gt;</button>
          </div>
        </div>
      </td>
      <td class="status-cell">
        <div class="status-blocks buttonDrawer">
          <button>btn1</button>
          <button>btn2</button>
          <button>btn3</button>
        </div>
        <div class="status-blocks">status text</div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

滑出控制抽屉或容器

2 个答案: