Question

我有一个覆盖菜单（Wordpress betheme）单击菜单项后，它不会自动关闭。

点击后，有人可以帮助关闭菜单吗？

/* ---------------------------------------------------------------------------
 * Menu | Overlay
 * --------------------------------------------------------------------------- */

$('.overlay-menu-toggle').click(function(e) {
  e.preventDefault();

  $(this).toggleClass('focus');
  $('#Overlay').stop(true, true).fadeToggle(500);

  var menuH = $('#Overlay nav').height() / 2;
  $('#Overlay nav').css('margin-top', '-' + menuH + 'px');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">
  <nav id="overlay-menu">
    <ul id="menu-felso-menu" class="menu overlay-menu">
      <li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-112"><a href="gyordetailing.hu/#detailing">Miért mi?</a></li>
    </ul>
  </nav>
</div><a class="overlay-menu-toggle" href="#"><i class="open icon-menu-fine"></i>TOGGLE</a>

Answer 1

这对我来说可以通过“侧面幻灯片”菜单使用。只需将代码放在“主题选项”的JS窗口中，并根据您的代码调整菜单ID。 Betheme除了滑入和移出移动菜单（例如，向右：-250px;），向左滑动整个身体（例如，向左：-125px;）并在菜单处于活动状态时显示深色的“ body_overlay”外，什么也不做。我具有与#anker的链接和正常子页面的链接，因此我分别解决了每个#anker的问题（＃menu-item-155）。汉堡菜单中的.icon-menu-fine类用于通过JS关闭菜单后使工作重新开始。

jQuery( document ).ready( function( $ ) {

$('#menu-item-155 a').click(function(e) {
  e.preventDefault();

  $(this).toggleClass('focus');
  $('#Side_slide').stop(true, true).fadeToggle(500);

  $('#Side_slide').css('right', '-250px');
  $('body').css('left', '0px');
  $('#body_overlay').css('display', 'none');
});


$('.icon-menu-fine').click(function(e) {
  e.preventDefault();

  $('#Side_slide').css('right', '0px');
  $('body').css('left', '-125px');
  $('#body_overlay').css('display', 'block');
  $('#Side_slide').css('display', 'block');
});

});

Answer 2

我刚刚复制了BeTheme代码的一部分，通过一些修改关闭了菜单。

只需将此代码放在“主题选项”>“自定义CSS和JS”中的JS窗口中：

jQuery(document).ready(function($) {

  /* Close Side Menu on item click */
  $('#Side_slide .menu-item a').click(function(e) {
    e.preventDefault()

    /* globals jQuery, mfn */
    var mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240
    var slide = $('#Side_slide')
    var overlay = $('#body_overlay')
    var ssMobileInitW = mobileInitW
    var pos = slide.hasClass('left') ? 'left' : 'right'
    var shiftSlide = -slide.data('width')
    var shiftBody = shiftSlide / 2
    var duration = 300

    if (pos === 'left') {
      slide.animate({ 'left': shiftSlide }, duration)
      $('body').animate({ 'right': 0 }, duration)
    } else {
      slide.animate({ 'right': shiftSlide }, duration)
      $('body').animate({ 'left': 0 }, duration)
    }

    overlay.fadeOut(300)

    // if page contains revolution slider, trigger resize
    if ($('.rev_slider').length) {
      setTimeout(function() {
        $(window).trigger('resize')
      }, 300)
    }

  })
})

Answer 3

这对我有用。似乎使用的操作按钮将转到页面上的设置锚点，但不会关闭幻灯片菜单。真是奇怪的行为。不确定是否会想要这种效果，尤其是在页面上放置深色覆盖层时。

在我看来，我需要去除所有美元符号。曼努埃尔（Manuel）的解决方案只是因为$的原因而不得不更改事物。

当然，您会看到我必须调整要在关闭滑杆时检测到的初始标签。

jQuery(document).ready(function()
 {
   jQuery('a.action_button.scroll').click(function(e)  /* Change this line with the ones below for different menu behaviours*/
    {
      e.preventDefault();
      jQuery(this).toggleClass('focus');
      jQuery('#Side_slide').stop(true, true).fadeToggle(500);
      jQuery('#Side_slide').css('right', '-250px');
      jQuery('body').css('left', '0px');
      jQuery('#body_overlay').css('display', 'none');
    });
   jQuery('.icon-menu-fine').click(function(e)
    {
      e.preventDefault();
      jQuery('#Side_slide').css('right', '0px');
      jQuery('body').css('left', '0px');
      jQuery('#body_overlay').css('display', 'block');
      jQuery('#Side_slide').css('display', 'block');
    });
 });

真的很甜。看到菜单最终在点击时关闭，真是太好了。

当然，我已经对其进行了调整，以便在单击/触摸任何菜单元素时，幻灯片菜单将消失，对上面的代码进行以下调整。

jQuery('ul#menu-main-menu-1').click(function(e)

我发现最令人愉悦的行为是使用此功能，因为它将捕获菜单上的所有单击并关闭它。

jQuery('div#Side_slide').click(function(e)

btw：此代码已插入“主题选项->自定义CSS和JS-> JS

单击thetheme后隐藏菜单

3 个答案: