Question

<div class="row">
  <div class="col-lg-2" ></div>
  <div class="head" style="background-color: #1c94c4; text-align: center; cursor: pointer;"> Chat</div>
  <div class="chat" style="display: none;width:auto;height: 200px;background:whitesmoke;">
    <div class="body" style="overflow:auto; overflow-x: hidden;height: 90%; width:auto;"></div>
    <textarea class="form-control" placeholder="Type a message..." style="float:left; resize: none; width:84%; height:34px; margin-right:4" ></textarea>
    <button class="btn btn-default" style="padding: 7px;height:34px ">Send</button>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('.head').click(function () {
      $('.chat').slideToggle({
        direction: "up"
      }, 300);
    })
  })
</script>

Answer 1

你最初需要隐藏它。来自the documentation：

如果元素最初显示，它将被隐藏;如果隐藏，它将被显示。

您可以使用单个CSS属性（display: none）隐藏它，您可以将其放在课堂中或直接添加，或使用.hide()。

此外，direction不是文档化的选项，您的示例代码实际上是works correctly in this jsFiddle（因为您确实有display:none）。您可能希望确保使用当前版本的jQuery并且没有任何控制台错误。

Answer 2

如果您引用jQuery .slideToggle() documentation，则会看到direction不是可用选项。但是，通过将.head元素移动到切换元素下方，我们可以实现我相信你所追求的目标。

$(document).ready(function () {
  $('.head').click(function () {
    $('.chat').slideToggle(300);
  })
})

.chat {
  display: none;
  width: auto;
  background: whitesmoke;
}
.form-control {
  float: left;
  resize: none;
  width: 84%;
  height: 200px;
  margin-right: 4px;
}
.btn {
  padding: 7px;
  height: 34px;
}
.head {
  clear: left;
  background-color: #1c94c4;
  text-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat">
  <textarea class="form-control" placeholder="Type a message..."></textarea>
  <button class="btn btn-default">Send</button>
</div>
<div class="head"> Chat</div>

如何使用jQuery将slideToggle的方向更改为up？

2 个答案: