Question

我想在我的angularjs应用程序中添加accordian。我必须在按钮上单击“附加信息”显示一些细节。不确定如何通过单击按钮来切换类面板。

这是我的HTML：

<button ng-click="showPanel()" class="accordian">Additional Information</button>

    <br>

    <div class="panel"  style="width: 750px;">
        <div class="panel-heading">Attributes</div>
            <table class="table table-bordered">                    
                <tbody>
                    <tr >
                        <td>{{room.allowFecc}}</td>
                    </tr>
                </tbody>
            </table>
    </div>

CSS：

button.accordian {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
display: none;
background-color: white;
}

div.panel.show {
display: block;
}

Answer 1

您可以删除只执行display: block的类 - Angular内置了ngShow和ngHide等指令，它们会为您处理此问题。基本上在Angular中，您希望操纵数据，然后让视图绑定回数据。

对于上面的基本示例，您希望将变量从true切换为false以显示手风琴或隐藏它，然后根据变量添加一个类：

The Angular：

$scope.toggleAccordian = function() {
    $scope.showAccordian = !$scope.showAccordian; //our toggle variable
}

HTML：

<button ng-click="toggleAccordian()" class="accordian">Additional Information</button>

<br>

<div class="panel" ng-show="showAccordian" ng-class="{'accordianActiveClass': showAccordian }" style="width: 750px;">
    <div class="panel-heading">Attributes</div>
        <table class="table table-bordered">                    
            <tbody>
                <tr >
                    <td>{{room.allowFecc}}</td>
                </tr>
            </tbody>
        </table>
</div>

ng-class="{'accordianActiveClass': showAccordian }"是类魔术，将accordianActiveClass替换为您要显示的类，当条件满足时（showAccordian），将添加该类。

Accordian in angularjs

1 个答案: