標記數據目標（一個空白）無法識別

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>

但是點擊手風琴標題主體沒有打開，因為數據目標值有空白區域。因為它來自數據庫使用，這是動態手風琴生成的必要條件。

任何人都可以建議一個解決方法嗎？ PS：這必須僅在客戶端重新解決

更新：這是我的帶有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>

要刪除空白區域，您必須編寫服務器端代碼，因為您說它來自數據庫。