Semantic-UI 标题中的手风琴按钮

Question

我想做的是：我想要一个手风琴，每一行都有问题名称（在下面的示例中为 "Question 1"）和标题中的两个按钮。但是，有两件事出了问题。

首先，单击两个按钮之一时，手风琴折叠。这个我没法修好。

其次，当手风琴关闭时，按钮与它们所在行的边界重叠。这可以在第二张图片中看到。

<div class="ui vertical styled fluid accordion">
    <div class="active title">
        <i class="dropdown icon"></i> Question 1
        <button class="ui right floated button"><i class="copy icon"></i>Copy</button>
        <button class="ui right floated button"><i class="share icon"></i>Share</button>
    </div>
    <div class="active content">
        <div class="ui celled grid">
            <div class="row">
                <div class="ui eight wide column">
                    <p>Question 1</p>
                </div>
                <div class="ui eight wide column">
                    <p>Answer: lorum ipsum en dingen</p>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

我使用语义 ui 本身提供的 "selector" 解决了这个问题。这里我附上了样本

$('.ui.accordion').accordion({
  selector: {
    trigger: '.title .qus_label'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="ui styled accordion" id="qus_acc">
  <div class="item">
    <div class="title">
      <div class="qus_label">
        <i class="dropdown icon"></i>
        <label>Asd</label>
      </div>
      <div class="field" align="right">
        <div class="ui blue compact simple dropdown button" title="Settings">
          <i class="fa fa-cog"></i>
          <div class="ui menu">
            <div class="item field">
              <div class="ui checkbox">
                <input type="checkbox">
                <label>Required</label>
              </div>
            </div>
            <div class="item field">
              <div class="ui checkbox">
                <input type="checkbox">
                <label>Random</label>
              </div>
            </div>
          </div>
        </div>
        <div class="ui red compact icon button" title="Delete" onclick="alert('Hi');">
          <i class="fa fa-trash"></i>
        </div>
        <div class="ui green compact icon button" title="Edit">
          <i class="fa fa-pencil-square-o"></i>
        </div>
        <div class="ui yellow compact icon button" title="Add Logic">
          <i class="fa fa-share-alt"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="transition hidden">
        <div class="ui form">
          <div class="field">
            <label>Question</label>
            <input type="text" placeholder="Single Selection">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

Semantic-UI 标题中的手风琴按钮

Semantic-UI Accordion Buttons in title

semantic-ui