<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).next('#container').slideToggle("slow");
}); });
</script>
最佳答案
您的代码当前说的是:“单击#container 时，找到下一个元素#container 并切换它”。
那行不通，在 id 为“container”的元素旁边没有其他#container 元素。
所以只要去掉.next('#container')部分，点击容器就会slideToggle它。
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).slideToggle("slow");
}); });
</script>
另请记住，隐藏容器时，您无法切换(再次显示)它，因为它现在已完全隐藏且根本无法点击。
关于javascript - 我无法使用滑动切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50752881/