gpt4 book ai didi

标题中的语义 UI Accordion 按钮

转载 作者:行者123 更新时间:2023-12-04 03:16:01 25 4
gpt4 key购买 nike

我想做的是:我想要一个 Accordion ,每一行都有 问题名称(在下面的示例中是“问题 1”)和标题中的两个按钮。但是,有两件事出了问题。

首先,单击两个按钮之一时, Accordion 折叠。这是我无法修复的。

其次,当 Accordion 关闭时,按钮会重叠它们所在行的边界。这可以在第二张图片中看到。

Figure 1 Figure 2

<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>

最佳答案

我通过使用语义 ui 本身提供的“选择器”解决了它。这里我附上了 sample

$('.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>

关于标题中的语义 UI Accordion 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45035613/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com