语义ui手风琴成模态

时间:2017-04-24 12:43:15

标签: css accordion semantic-ui

修改 发现问题,但不知道如何解决。 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尝试这个,它的工作。在我的页面中我有这个 enter image description here

第一项实际上不起作用。

最奇怪的是,在一个相同的jsfiddle中它的工作

1 个答案:

答案 0 :(得分:1)

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

只需查看https://jqueryui.com/download/

即可

创建您自己的自定义jquery-ui库,不要检查组件accordion

它可能会解决你的错误。