javascript - 尝试让 Slideout.js 在 WordPress 中工作

Question

我似乎无法让 Slideout.js 在 WordPress 安装中工作，而且说实话，我对 JavaScript 很烂，所以我所问的很可能有一个简单的答案。这是我所拥有的

在常规 ol' HTML 中按预期工作:

<script src="assets/js/slideout.js"></script>
<script>
  window.onload = function() {
    var slideout = new Slideout({
      'panel': document.getElementById('panel'),
      'menu': document.getElementById('menu'),
      'side': 'right'
    });

    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });

    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A') { slideout.close(); }
    });
  };
</script>

我将它在functions.php 文件中排队，如下所示:

function theme_js() {
    wp_enqueue_script ('flexslider-js', get_template_directory_uri() . '/assets/js/flexslider.js', array('jquery'),'',true);
    wp_enqueue_script ('slideout', get_template_directory_uri() . '/assets/js/slideout.js', array('jquery'),'',true);
    wp_enqueue_script ('theme', get_template_directory_uri() . '/assets/js/theme.js', array('jquery'),'',true);
}

add_action('wp_enqueue_scripts', 'theme_styles');
add_action('wp_enqueue_scripts', 'theme_js');

我试图在 theme.js 中调用它，如下所示:

jQuery(document).ready(function() {
var slideout = new Slideout({
      'panel': document.getElementById('panel'),
      'menu': document.getElementById('menu'),
      'side': 'right'
    });

    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });

    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A') { slideout.close(); }
    });
});

我 97% 确定问题在于我如何尝试将其添加到 theme.js，但就像我说的，我对 JS 非常缺乏经验，尤其是对 JS 在 WordPress 内部的工作方式缺乏经验，所以我可以提供任何帮助能得到将不胜感激!

Answer 1

我真的觉得自己像个白痴。 JS 链接正确，但有一些 CSS 元素在 WP 版本与本地 PHP 版本上的呈现方式不同。我最终从每个控制台窗口中拉出两个窗口并排比较以查看差异，这就是我的解决办法。如果其他人也遇到同样的问题，请务必检查 CSS。如果您在 WordPress 中使用开发人员的样式表/源代码，则开发人员预先打包的内容会相互冲突。特别是在我的情况下，如果您试图从右侧取出滑出装置。