Question

我有一个html手风琴，我通过data-value用空格调用相应的身体。

手风琴标题：

    <div data-toggle="collapse" data-target="#Drug Test">Drug Test</div>

手风琴体：

    <div id="Drug Test" class="accordion-body collapse ">
      <p>Test Data</p>       
    </div>

但点击手风琴标题主体没有打开，因为数据目标值有空格。因为它来自数据库使用，这是动态手风琴生成的必修课。

有人可以建议解决方法吗？ P.S：这必须仅在客户端重新解决

更新这是带有angular指令的源代码html

  <div class="form-group panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div ng-repeat="key in keys">
                                    <div class="panel panel-default selectedinvestigations">
                                        <div class="panel-heading">
                                            <i class="glyphicon glyphicon-folder-open pull-right"></i>
                                            <input id="btn{{key}}" type="checkbox" class="pull-left" ng-click="selectAll(key)" />

                                            <div class="padLeft" data-toggle="collapse" data-target="#{{key}}">{{key}}</div>
                                        </div>
                                        <div class="panel-body">
                                            <div id="{{key}}" class="accordion-body collapse ">
                                                <div class="" ng-repeat="inv in allInvestigationsGrouped[key]">
                                                    <div>
                                                        <ul>
                                                            <div class="col-md-8 input-group">
                                                                <span class="input-group-addon ">
                                                                    <input name="checkAll" class="{{key}}" type="checkbox" ng-model="inv.selected"
                                                                           data-id="{{inv.id}}"
                                                                           data-name="{{inv.name}}"
                                                                           data-description="{{inv.description}}"
                                                                           data-isactive="{{inv.isActive}}"
                                                                           data-quantity="{{inv.quantity}}" />
                                                                </span>
                                                                <label class="form-control">{{inv.name}} </label>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

Answer 1

您可以使用php中的str_replace将_替换为空格：

<?php echo str_replace(' ', '_', $row['from_database_table']); ?>

试试这个：

<div data-toggle="collapse" data-target="#<?php echo str_replace(' ', '_', $row['from_database_table']); ?>">Drug Test</div>

<div id="<?php echo str_replace(' ', '_', $row['from_database_table']); ?>" class="accordion-body collapse">
      <p>Test Data</p>       
</div>

Answer 2

你这样做是错误的。 Id不应包含空格。所以只需从id中删除空格并使其如下所示

<div id="DrugTest" class="accordion-body collapse ">
      <p>Test Data</p>       
</div>

和手风琴这样：

<div data-toggle="collapse" data-target="#DrugTest">Drug Test</div>

要删除空白区域，您必须编写服务器端代码，因为您说它来自数据库。

标记数据目标（一个空白）无法识别

2 个答案: