语义 ui 折叠成模态

Question

编辑： 发现问题，但不知道如何解决。 semant.js 和 jquery.ui.js

有问题

错误: http://jsfiddle.net/taioli/tg21uLoh/12/

正确（没有jquery.ui）http://jsfiddle.net/taioli/tg21uLoh/11/

我不明白这个问题。我有一个手风琴进入一个不起作用的模态。首先，我认为存在 css 冲突，但是，经过一些证据表明我这样做了，没有 css 冲突。

模态

<div class="ui modal history">
    <i class="close icon"></i>
    <div class="header">
        Profile Picture
    </div>
    <div class="content">

        <div class="ui accordion">
            <div class="title">
                <i class="dropdown icon"></i>
                What is a dog?
            </div>
            <div class="content">
                <p class="transition ">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                What kinds of dogs are there?
            </div>
            <div class="content">
                <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
            </div>
            <div class="title ">
                <i class="dropdown icon"></i>
                How do you acquire a dog?
            </div>
            <div class="content ">
                <p class="transition ">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
                <p class="transition ">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Nope
        </div>
        <div class="ui positive right labeled icon button">
            Yep, that's me
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

js

文档准备就绪

$('.ui.accordion').accordion();

$('.ui.modal.history').modal('show');

我在 jsfiddle 中试了一下，成功了。在我的页面上我有这个

第一项实际上不起作用。

最奇怪的是，在一个完全相同的 jsfiddle 中它是有效的

Answer 1

Semantic.js和jQuery-ui.js具有相同的功能'Accordion'

随便看看https://jqueryui.com/download/

创建您自己的自定义 jquery-ui 库并且不检查组件 accordion。

它可能会解决您的错误。

语义 ui 折叠成模态

Semantic ui accordion into modal

css

accordion

semantic-ui