语义 UI 手风琴无法正常工作

Question

我的页面中有一个手风琴元素。问题是手风琴出现在页面上但不可点击。 'not clickable' 是指当我单击 header 时，它不会展开以显示内容。什么都没有发生。我希望有人能帮帮忙。

提前致谢。

Answer 1

Your jQuery.js module must be loaded before the semantic-ui accordion.js module.

简单地说

<script src="js/accordion.js"></script>

在

之后

<script src="js/vendor/jquery-1.11.2.min.js"><\/script>

（或者你的 jQuery 版本是什么...）

并在脚本标记内的 html 文档中将手风琴初始化为：

<script language='javascript'>
             $(document).ready(function(){
                $('.ui.accordion').accordion();
             });
</script>

Answer 2

它发生在 嵌套手风琴 而你的脚本在 $( document ).ready(function() 所以尝试在这样的 ajax 回调中调用手风琴函数；

$('input[name=sampleInput]').on('input', function() {

var val = $("input[name=sampleInput]").val();

if (val.length >= 3)
{
  $.ajax( {
    url: 'sample_handler.php',
    type: 'GET',
    data: {

      data: data

    },
    dataType: 'html',

    success: function ( response ) {

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

   })
  }
})

例如，我将手风琴函数放在回调中。所以我可以一次又一次地使用它，即使我添加了嵌套的手风琴。

Answer 3

在我的例子中，我在 javascript/jQuery 中有语法错误。在修复它并在 semantic-ui 之前导入 jQuery 模块后，它就可以工作了。可以在浏览器中打开开发工具，在javascript(Chrome中F12)查看控制台是否有错误。

    <script type="text/javascript">

$(document).ready(function() {

   window.onload = function(){
       $('.ui.accordion').accordion();

   };
});

</script>

语义 UI 手风琴无法正常工作

Semantic UI Accordion not working properly

html

css

accordion

semantic-ui