相关疑难解决方法(0)

在Bootstrap手风琴中,a我想要点击panel-headingdiv中的任何地方,而不是要求点击文本.

我正在使用Bootstrap 3.因此,它不仅仅是手风琴,而是一个可折叠的面板.知道怎么做整个面板可点击吗？

我已经阅读了有关我的问题的所有相关问题,并尝试了所有这些问题无济于事.我似乎无法使我的代码工作,即使我"思考"我写的几乎所有代码与本网站上发布的解决方案相同.

这是HTML代码:

<div class="press-title">
  <p class="text" data-toggle="collapse" data-target="#serviceList">
    <span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
      <span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
    </span>
  </p>
</div>
<div id="serviceList" class="collapse">
  <div class="row featurette">
  ...

这是JQuery

$('#serviceList').on('shown.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  }

$('#serviceList').on('hidden.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  }

我只是想在折叠元素时将图标从下到上更改.然后在单击同一个类时切换回来.我真的很困惑这个.先感谢您!

我有一个bootstrap 3崩溃的问题,在以编程方式打开面板后,可以在重新打开第一个面板时保持另一个面板打开.

我的HTML:

<button type="button" class="btn showpanel">Show panel 3</button>
<button type="button" class="btn hidepanel">Hide panel 3</button>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr/>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div …

我有一个使用bootstrap collapse元素的角度应用程序.我创建了一个名为accordion-list的指令来托管可折叠元素.然后,为了听取事件,我使用了jquery事件委托.由于某种原因,我的应用程序无法检测引导程序何时触发hidden.bs.collapse事件.这是我的代码:

//app.js
    'use strict';

(function () {
    var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [
        'restClient'
    ]);

    provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){
        $scope.inscricao = {
            "Secretaria": ""
        };

        $("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
            if ($(this).hasClass("in")) {
                $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
                $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
            } else {
                $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
                $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
            }

            console.log(1, this, event); // i have detected the problem by interpreting 
        });

        ListaInscricao.get({"id": 1}, function(data){
            if (data.Sucesso) {
                $scope.inscricao = data.Dados;
            } else {
                // toastr
            }
        });
    }]);

    provasNaoIdentificadas.directive('accordionList', function() …

我无法让可折叠面板在我的foreach循环中工作.单击某个项目时,所有项目都会展开/缩进,这不是我想要的.我希望每个元素都是独立的.

我连接到数据库,基本上只想显示数据,并能够扩展以查看更多信息.

我已经尝试了很多不同的解决方案,我目前的方法基于/sf/answers/1299829821/ 我应该怎么做id和href？

任何帮助将不胜感激.

    foreach (var item in groupItem){

<div class="panel-group" id="accordion">
                        <div class="panel panel-default" id="panel1">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-target="#collapseOne"
                                       href="#collapseOne">
                                       @Html.DisplayFor(modelItem => item.Name)
                                    </a>
                                </h4>

                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">@Html.DisplayFor(modelItem => item.IdNumber)
                                </div>
                            </div>
                        </div>

                    </div>