Question

我已经在StackOverflow上找到了几种解决方法，但是无法在我的Wordpress主题上使用它。对js / JQuery来说是非常新的知识，始于我开始对此进行故障排除时。 Here is my website。

现在，我的“ WORK”子菜单在悬停时打开，在桌面上可以，但是在767px以下的移动屏幕上，我的导航菜单变为此jQuery函数操作的按钮，而我的整个“ WORK”子菜单为打开，列出所有内容并占用大量空间：

@Service
public class NotificationServiceImpl implements NotificationService {

    @Autowired
    private LogDao logDao;

    @Override
    @Transactional(rollbackFor = Exception.class, readOnly = false)
    public void saveLogAndNotify(Log log) {
        return logDao.createLog(log);
    }


@Repository
public class LogDaoImpl{

    @Autowired
    protected SessionFactory sessionFactory;


    @Override
    public void createLog(Log log) {
        sessionFactory.getCurrentSession().saveOrUpdate(log);
    }

当我从this post添加此代码时，整个菜单按钮在移动设备上消失了，没有可点击的内容：

(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
  menu.removeClass('open');
} else {
  menu.addClass('open');
}
       });
    });
;

我尝试了几种不同的方法，例如this one，它也使按钮消失并且似乎与jQuery按钮代码冲突。

此PHP似乎定义了导航类：

$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
    var $el = $('ul',this); // element to toggle
    $('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
    $el.stop(true, true).slideToggle(400); // toggle element
    return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
    e.stopPropagation();  // stop events from bubbling from sub menu clicks
});
});

，这里有相应的CSS：

<?php
            wp_nav_menu(array(
             'container_id' => 'cssmenu',
             'theme_location' => 'menu-1',
             'fallback_cb'       => 'gusto_photography_Menu_Walker::fallback',
             'walker' => new Gusto_Photography_Menu_Walker(),
            ));
        ?>

我不确定为什么我添加的jQuery根本不会影响它的子菜单。谢谢您的帮助。

Answer 1

您可以尝试将“ ul”项目定位到“工作” li项目的内部，并使用display:none将其隐藏。然后，点击作品li，您可以添加和删除一个类，例如class="open"，以使用jQuery关闭或打开子菜单。

<ul class="menu">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
   <li class="has-children">Click me!
    <ul class="submenu">
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
    </ul>
  </li>
 <li>list item</li>
 <li>list item</li>  
</ul>

CSS可能是这样的：

.menu {
  .has-children {
    color: red;
    cursor:pointer;
      &.open {
      .submenu {
        display:block;
      }
     }
    }
    & :nth-child(4n) {
     ul {
      display:none;
     }
   }
 }

和jQuery这样的东西：

$( document ).ready(function() {
  $('.has-children').on('click', function(){

  if ($('.has-children').hasClass('open')) {
     $(this).removeClass('open');
   } else {
      $(this).addClass('open');
   }
  });  
});

如果您看到它起作用，它将更加有意义。

我在以下链接中整理了一个可行的示例：https://codepen.io/Angel-SG/pen/JwXRZo

无法在移动设备上隐藏子菜单并在单击时显示它

1 个答案: