在 Semantic.JS 中设置 Accordion 的标题

Question

我正在使用语义 UI JS 来实现各种 UI 功能。这是 Semantic UI 的 link。我需要动态设置标题的值。在下面的示例中 "Title 1"。正在寻找使用 JQuery 的方法。

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    Title 1
  </div>
  <div class="content">
    <p class="transition hidden">Content of the title</p>
  </div>
</div>

Answer 1

我会将标题文本包装在 span 元素中，以便我可以定位它并使用 jQuery .text() 方法更改文本。

$(function() {
  // initialize accordion
  $('.ui.accordion')
    .accordion({
      selector: {
        trigger: '.title'
      }
    })

  // change title on button click
  $('button').on('click', function() {
    $('.title span').text('The new title to use')
  });
});

@import url('https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    <span>Title 1</span>
  </div>
  <div class="content">
    <p class="transition hidden">Content of the title</p>
  </div>
</div>

<button>Change the title</button>

在 Semantic.JS 中设置 Accordion 的标题

Set the title of Accordion in Semantic.JS

html

jquery

semantic-ui