Semantic UI手风琴未正常工作

Question

我在页面上有一个手风琴元素。问题是手风琴出现在页面上，但无法点击。所谓的“无法点击”是指当我单击标题时，它不会展开以显示内容。什么都没有发生。希望有人能帮助解决这个问题。

先行致谢。

- Fᴀʀʜᴀɴ Aɴᴀᴍ

---

发布代码吧，我猜你在这里看过示例 http://legacy.semantic-ui.com/modules/accordion.html#/examples - Maytham Fahmi

但是那样做不起作用。我认为问题在于链接正确的脚本和CSS。 - Fᴀʀʜᴀɴ Aɴᴀᴍ

Answer 1

在使用semantic-ui的手风琴组件前，必须先加载jQuery.js模块。

简单来说

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

- Biraj Bora

---

把jQuery加载在其他任何东西之前就解决了问题！非常感谢。 - Fᴀʀʜᴀɴ Aɴᴀᴍ

Answer 2

在我的情况下，我在javascript / jQuery中有语法错误。修复后，在semantic-ui之前导入jQuery模块即可解决问题。您可以在浏览器中打开开发工具，并检查javascript中的错误（在Chrome中按F12）。

    <script type="text/javascript">

$(document).ready(function() {

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

   };
});

</script>

- fmelan

Answer 3

这种情况通常发生在嵌套手风琴中，而你的脚本位于$( 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({});
     }

   })
  }
})

例如，我已经将手风琴功能放在回调中。因此，即使我添加嵌套手风琴，我也可以一遍又一遍地使用它。

- Musa Toktaş