在wordpress中使用JS Overlay的Bootstrap NavBar不起作用

时间:2017-05-09 10:37:49

标签: javascript html css wordpress twitter-bootstrap

我创建了一个带有引导程序模板的站点,使用html就可以了。 我使用Wordpress来创建一个博客,但我必须清楚地拥有相同的标题和相同的网站页脚。 一切都好,但触发器没有打开叠加层,控制台说没关系,叠加菜单元素存在,我认为唯一的问题是使用javascript。

此时网站为teknogrc.altervista.org

在这里你可以看到HTML

    <header class="navbar-fixed-top s-header js__header-sticky js__header-overlay">
        <!-- Navbar -->
        <!-- Navbar -->
        <div class="s-header__navbar">
            <div class="s-header__container">
                <div class="s-header__navbar-row">
                    <div class="s-header__navbar-row-col">
                        <!-- Logo -->
                        <div class="s-header__logo">
                            <a href="index.html" class="s-header__logo-link">
                                <img class="s-header__logo-img s-header__logo-img-default" src="img/logo.png" alt="TeknoGRC Logo">
                                <img class="s-header__logo-img s-header__logo-img-shrink" src="img/logo.png" alt="TeknoGRC Logo">
                            </a>
                        </div>
                        <!-- End Logo -->
                    </div>
                    <div class="s-header__navbar-row-col">
                        <!-- Trigger -->
                        <ul style="margin-right: 70px; padding-top-top: 100px" class=" hidden-xs list-inline s-header__action s-header__action--rb">
                <li class="s-header__action-item"><a class="s-header__action-link -is-active" href="index.html">It   <span class="flag-icon flag-icon-it flag-icon-rounded"></span></a></li>
                <li class="s-header__action-item"><a class="s-header__action-link" href="index_ENG.html">En   <span class="flag-icon flag-icon-gb flag-icon-rounded"></span></a></li>
                <li class="s-header__action-item"><a class="s-header__action-link" href="index_DE.html">De   <span class="flag-icon flag-icon-de flag-icon-rounded"></span></a></li>
            </ul>
                        <a href="javascript:void(0);" class="s-header__trigger js__trigger">
                            <span class="s-header__trigger-icon"></span>
                            <svg x="0rem" y="0rem" width="3.125rem" height="3.125rem" viewbox="0 0 54 54">
                                <circle fill="transparent" stroke="#fff" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
                            </svg>
                        </a>
                        <!-- End Trigger -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Navbar -->

        <!-- Overlay -->
        <div class="s-header-bg-overlay js__bg-overlay">
   <!-- Overlay -->
        <div class="s-header-bg-overlay js__bg-overlay">
            <!-- Nav -->
            <nav class="s-header__nav js__scrollbar">
                <div class="container-fluid">

在这里你可以看到JS代码。

var handleOverlay = function() {
    var overlay = $('.js__bg-overlay'),
      headerOverlay = $('.js__header-overlay'),
      trigger = $('.js__trigger');
trigger.on('click', function() {
  overlay.toggleClass('-is-open');
  headerOverlay.toggleClass('-is-open');
  trigger.toggleClass('-is-active');


   });
  }

可以帮助我的人=?

0 个答案:

没有答案