时间戳

首页 > 解决方案 > 我不能使用滑动切换

javascript - 我不能使用滑动切换

问题描述

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

标签： javascripthtmlcssangularjs

解决方案

您的代码当前所说的是：“单击#container 时，找到下一个元素#container 并切换它”。

这不起作用，除了 ID 为“container”的元素之外没有其他#container 元素。

所以只需删除 .next('#container') 部分，然后单击容器将滑动切换它。

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

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

推荐阅读