Question

我正在研究字典。在文章编辑表格中，有许多单词的翻译。另外，对于每种翻译，我们都可以添加图片和主题，但是默认情况下这些div会折叠。然后通过点击展开，除第一个以外的所有内容。我不明白为什么第一个元素不会扩展。所有代码都是相同的。我尝试了很多方法，例如：

数据目标与href，
$（“ elementId”）。collapse（），
检查每个相同元素的代码以查看它们之间的区别...

但没有找到解决方案。我使用此插件：https://getbootstrap.com/docs/3.3/javascript/#collapse 您可以在页面http://dict.arabera.org/article/20463

上重复我的经验

呈现的代码如下：

<div class="translations">
        
        <div class="translation" id="translation-translations.0">
          <div class="editField" id="translations.0">
    <div class="mainRow">
      
      <input type="text" name="translations.0.translation" class="form-control translation" placeholder="перевод">
      <!--
        <i class="glyphicon glyphicon-remove remove-translation -remove" id="remove.{{item.id}}"></i>
      -->
      <div class="dropdown">
        <a type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <i class="glyphicon glyphicon-option-vertical"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#subjects-translations-0" data-toggle="collapse" class="" aria-expanded="true">+ subject</a></li>
          <li><a href="#images-translations-0" data-toggle="collapse" class="" aria-expanded="true">+ image</a></li>

          <li role="separator" class="divider"></li>
          <li><a class="remove-translation" id="remove.translations.0">- delete</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="subjects collapse tags" id="subjects-translations-0">
    <div class="-dropdown-container">
    <input id="tagInput" type="text" class="form-control tagInput" placeholder="+ добавить тематику">
    
  </div>
  
  </div>

  <div class="images collapse" id="images-translations-0">
    <div class="row">
    
  </div>

  <button class="btn btn-default btn-xs add-image translation-actions" id="addImageFor.translations.0">
    <i class="glyphicon glyphicon-plus"></i>Картинка
  </button>
  </div>

          <div class="examples" id="examples-for-translations.0">
            
            <button class="btn btn-default btn-xs add-example translation-actions" id="addExampleFor.translations.0">
              <i class="glyphicon glyphicon-plus"></i>Пример
            </button>
          </div>
        </div>
        
        <div class="translation" id="translation-translations.1">
          <div class="editField" id="translations.1">
    <div class="mainRow">
      
      <input type="text" name="translations.1.translation" class="form-control translation" placeholder="перевод">
      <!--
        <i class="glyphicon glyphicon-remove remove-translation -remove" id="remove.{{item.id}}"></i>
      -->
      <div class="dropdown">
        <a type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <i class="glyphicon glyphicon-option-vertical"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#subjects-translations-1" data-toggle="collapse" class="" aria-expanded="true">+ subject</a></li>
          <li><a href="#images-translations-1" data-toggle="collapse" class="" aria-expanded="true">+ image</a></li>

          <li role="separator" class="divider"></li>
          <li><a class="remove-translation" id="remove.translations.1">- delete</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="subjects tags collapse in" id="subjects-translations-1" aria-expanded="true" style="">
    <div class="-dropdown-container">
    <input id="tagInput" type="text" class="form-control tagInput" placeholder="+ добавить тематику">
    
  </div>
  
  </div>

  <div class="images collapse in" id="images-translations-1" aria-expanded="true" style="">
    <div class="row">
    
  </div>

  <button class="btn btn-default btn-xs add-image translation-actions" id="addImageFor.translations.1">
    <i class="glyphicon glyphicon-plus"></i>Картинка
  </button>
  </div>

          <div class="examples" id="examples-for-translations.1">
            
            <button class="btn btn-default btn-xs add-example translation-actions" id="addExampleFor.translations.1">
              <i class="glyphicon glyphicon-plus"></i>Пример
            </button>
          </div>
        </div>
        
        <div class="translation" id="translation-translations.2">
          <div class="editField" id="translations.2">
    <div class="mainRow">
      
      <input type="text" name="translations.2.translation" class="form-control translation" placeholder="перевод">
      <!--
        <i class="glyphicon glyphicon-remove remove-translation -remove" id="remove.{{item.id}}"></i>
      -->
      <div class="dropdown">
        <a type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <i class="glyphicon glyphicon-option-vertical"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#subjects-translations-2" data-toggle="collapse" class="" aria-expanded="true">+ subject</a></li>
          <li><a href="#images-translations-2" data-toggle="collapse" class="" aria-expanded="true">+ image</a></li>

          <li role="separator" class="divider"></li>
          <li><a class="remove-translation" id="remove.translations.2">- delete</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="subjects tags collapse in" id="subjects-translations-2" aria-expanded="true" style="">
    <div class="-dropdown-container">
    <input id="tagInput" type="text" class="form-control tagInput" placeholder="+ добавить тематику">
    
  </div>
  
  </div>

  <div class="images collapse in" id="images-translations-2" aria-expanded="true" style="">
    <div class="row">
    
  </div>

  <button class="btn btn-default btn-xs add-image translation-actions" id="addImageFor.translations.2">
    <i class="glyphicon glyphicon-plus"></i>Картинка
  </button>
  </div>

          <div class="examples" id="examples-for-translations.2">
            
            <button class="btn btn-default btn-xs add-example translation-actions" id="addExampleFor.translations.2">
              <i class="glyphicon glyphicon-plus"></i>Пример
            </button>
          </div>
        </div>
        
        <button class="btn btn-default btn-sm add-translation">
          <i class="glyphicon glyphicon-plus"></i>Перевод
        </button>
      </div>

生成表单的模板如下：

<template name="ArticleForm">
  <form
    id="articleForm-{{_id}}"
    class="panel panel-default article {{#if notPublished}}-opacity-06{{/if}}"
  >
    <div class="panel-heading">
      <div class="panel-title words">
        <div class="label label-info speach-part">{{ speachPart }}</div>
        <br />
        <!--
          Глагол 1й породы имеет дополнительную информацию для вывода, поэтому
          особый шаблон его вывода, например, среднекорневую глассную и масдары
        -->
        {{#each article.words}}
        <div class="wordEdit editField" id="{{wordId}}">
          <i class="glyphicon glyphicon-remove remove-word -remove" id="remove.{{wordId}}"></i>
          <input
            type="text"
            placeholder="прим."
            value="{{note}}"
            name="{{wordId}}.note"
            class="form-control note"
          />
          <input
            type="text"
            placeholder="слово"
            value="{{word}}"
            name="{{wordId}}.word"
            class="form-control word -arabic-text-mid"
          />
        </div>
        {{#if showMiddleHarakat ../speachPart @index}}
        <div class="note middleHarakat" title="среднекорневая гласная настоящего времени">
          <input
            type="text"
            placeholder="скгнв"
            value="{{../middleHarakat}}"
            name="middleHarakat"
            class="form-control note"
          />
        </div>
        {{/if}} {{/each}}
        <div class="add-word"><i class="glyphicon glyphicon-plus"></i></div>
      </div>
    </div>
    <div class="panel-body">
      <div class="translations">
        {{#each tr in article.translations}}
        <div class="translation" id="translation-{{tr.id}}">
          {{> TranslationItem templateInstance=templateInstance item=tr}}

          <div class="examples" id="examples-for-{{tr.id}}">
            {{#each ex in tr.examples}}
            <div class="example" id="example-{{ex.id}}">
              {{> TranslationItem templateInstance=templateInstance item=ex isExample=true}}
            </div>
            {{/each}}
            <button
              class="btn btn-default btn-xs add-example translation-actions"
              id="addExampleFor.{{tr.id}}"
            >
              <i class="glyphicon glyphicon-plus"></i>Пример
            </button>
          </div>
        </div>
        {{/each}}
        <button class="btn btn-default btn-sm add-translation">
          <i class="glyphicon glyphicon-plus"></i>Перевод
        </button>
      </div>

      {{> TagsRoots}} {{> TagsMorphology parentTemplateInstance=templateInstance}}
    </div>
    <div class="panel-footer">
      <button class="btn btn-primary article-save">Сохранить</button>
      <button class="btn btn-default article-edit-cancel">Отмена</button>
    </div>
  </form>
</template>

<template name="ImagesEdit">
  <div class="row">
    {{#each images}}
    <div class="col-sm-4 imageColumn">{{> ImageEdit}}</div>
    {{/each}}
  </div>

  <button
    class="btn btn-default btn-xs add-image translation-actions"
    id="addImageFor.{{elementId}}"
  >
    <i class="glyphicon glyphicon-plus"></i>Картинка
  </button>
</template>

<template name="ImageEdit">
  <div class="thumbnail image editField" id="{{imageId}}">
    <i class="glyphicon glyphicon-remove remove-image -remove" id="remove.{{imageId}}"></i>
    <img class="form-control" placeholder="preview" src="{{image}}" />
    <input
      type="text"
      placeholder="ссылка на картинку"
      value="{{image}}"
      name="{{imageId}}.image"
      class="form-control imageLink"
    />
  </div>
</template>

<!-- TranslationItem means both: translation and example, which are similar -->
<template name="TranslationItem">
  <div class="editField" id="{{item.id}}">
    <div class="mainRow">
      {{#if isExample }}
      <input
        type="text"
        placeholder="пример"
        value="{{item.example}}"
        name="{{item.id}}.example"
        class="form-control example -arabic-text-mid"
      />
      {{/if}}
      <input
        type="text"
        name="{{item.id}}.translation"
        value="{{item.translation}}"
        class="form-control translation"
        placeholder="перевод"
      />
      <!--
        <i class="glyphicon glyphicon-remove remove-translation -remove" id="remove.{{item.id}}"></i>
      -->
      <div class="dropdown">
        <a type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <i class="glyphicon glyphicon-option-vertical"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#subjects-{{replaceDot item.id}}" data-toggle="collapse">+ subject</a></li>
          <li><a href="#images-{{replaceDot item.id}}" data-toggle="collapse">+ image</a></li>

          <li role="separator" class="divider"></li>
          <li><a class="remove-translation" id="remove.{{item.id}}">- delete</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="subjects collapse tags" id="subjects-{{replaceDot item.id}}">
    {{> TagsSubjects parentTemplateInstance=templateInstance elementName=item.id}}
  </div>

  <div class="images collapse" id="images-{{replaceDot item.id}}">
    {{> ImagesEdit images=item.images elementId=item.id}}
  </div>
</template>

Bootstrap 3.3折叠适用于除第一个元素外的每个相同元素

0 个答案: