Question

<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>

Answer 1

您的代码目前所说的是：＆＃34;点击#container后，找到下一个元素#container并切换它＆＃34;。

这不起作用，元素旁边没有其他#container元素，ID为＃34;容器＆＃34;。

所以只需删除.next（＆＃39;＃container＆＃39;）部分，然后点击容器就会滑动它。

<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>

另外请记住，当隐藏容器时，你无法切换（再次显示）它，因为它现在完全隐藏而且根本无法点击。

我不能使用slidetoggle

1 个答案: