使用Semantic UI Accordion和JQuery UI Accordion时发生冲突

Posted 2021-03-31

我正在使用Semantic UI和Jquery UI。但是，我想使用Semantic UI手风琴，当我调用Semantic UI的手风琴类时似乎存在冲突。

样品：

<div class="ui accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="active content">
    <p>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>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>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>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>

有什么建议？

答案

我在jQuery UI中使用了Semantic UI，对我来说没有问题。

你是否在main.js中初始化了语义ui手风琴？

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

在你的文档加载javascript函数中添加上面的代码，它应该工作！

(function($) {
    $('.ui.accordion')
      .accordion()
    ;
}(jQuery)); 

还要确保在语义JS之前添加jQuery JS。

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Semantic-ui JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>

另一答案

jquery ui和semantic有一个accordion，所以存在冲突。

如需修复，请从here下载并检查所有WITHOUT手风琴。

我试着解决它。

希望它能为你效劳。

另一答案

正如其他人所指出的那样，这是JUI和SUI accordion功能之间的冲突。

我没有看到任何提及（目前已关闭）item in the SUI issue tracker about this。如果你有倾向，你可以在那里称重（或者，更好的是，提供PR）。