Question

我的响应菜单有问题，当我单击菜单图标时，它会向下滚动并在一秒钟内迅速关闭。太奇怪了，因为它发生在主页上，但是在其余页面上，当我单击菜单时，它会向下滚动并且没有关闭，所以这是个好主意。

任何人都知道这是普遍现象，还是一个特定问题？

这是我的header.php代码：

<!DOCTYPE html>
<html lang="<?php echo get_bloginfo( 'language' ); ?>">

    <head prefix="og: http://ogp.me/ns#">

<meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="<?php echo get_bloginfo( 'charset' ); ?>" />

        <?php if (!is_404()) { include('inc/header_share.php'); } ?>

        <title><?php wp_title( '|', true, 'right' ); ?></title>

        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

        <link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/assets/css/ionicons.min.css" />
        <link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/assets/fonts/fonts.css" />
        <link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/assets/css/forms.css" />
        <link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/assets/css/owl.carousel.css" />
        <link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/assets/css/style.css" />

        <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

        <link rel="icon" href="<?php echo bloginfo('template_directory'); ?>/assets/img/favicon.png" type="image/x-icon" />

        <?php wp_head(); ?>

    </head>

    <body <?php body_class(); ?>>
    <script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/assets/js/jquery-1.11.1.min.js"></script>

这是我的home-page.php：

<?php /* Template Name: Home Page */ ?>

<?php include ( TEMPLATEPATH . '/header.php'); ?>
<?php include ( TEMPLATEPATH . '/includes/nav/menu-sup.php'); ?>
<?php include ( TEMPLATEPATH . '/includes/varios/quick-contact.php'); ?>

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <?php include ( TEMPLATEPATH . '/includes/home/slider.php'); ?>
            <div align="center">
    <a href="http://page.org/page/" target="_blank"><img src="http://www.page.org/wp-content/themes/page/images/22.jpg" /></a>
        <a href="http://www.page.org/pagecalendar" target="_blank"><img src="http://www.page.org/wp-content/themes/page/images/portal31.png" /></a> 
    <a href="https://www.facebook.com/pg/page.org/photos/?tab=album&album_id=168951596363636788" target="_blank"><img src="http://www.page.org/wp-content/themes/page/images/GOLF.png" /></a>
    <!--<a href="http://page.org/padel" target="_blank"><img src="http://www.page.org/wp-content/themes/page/images/PADELRESP.gif" /></a>-->
    <a href="http://page.org/no-category/forjm/#anchor/" target="_blank"><img src="http://www.page.org/wp-content/themes/page/images/bannerweb2.png" /></a>

</div>
            <?php include ( TEMPLATEPATH . '/includes/intros/home-intro.php'); ?>
            <?php include ( TEMPLATEPATH . '/includes/home/colaborate.php'); ?>
            <div align="center">
       <a href="http://www.radio.com" target="_blank"> <img src="http://www.page.org/wp-content/themes/page/images/radio3mobile.png" /></a>
      <!-- <a href="http://www.page.org/document_oficials/N1 Magazine.pdf" target="_blank"> <img src="http://www.page.org/wp-content/themes/page/images/magazinemobile.jpg" /></a>-->
      <a href="http://page.org/magazine/" target="_blank"> <img src="http://www.page.org/wp-content/themes/page/images/magazinemobile.jpg" /></a>
</div>
            <?php include ( TEMPLATEPATH . '/includes/home/loop-news.php'); ?>

        <?php endwhile; ?>

    <?php else: ?>
        <?php include ( TEMPLATEPATH . '/includes/vars/loop-void.php'); ?>
    <?php endif; ?>

    <!--<?php include ( TEMPLATEPATH . '/includes/home/newsletter.php'); ?>-->

<?php include ( TEMPLATEPATH . '/includes/nav/menu-inf.php'); ?>  
<?php include ( TEMPLATEPATH . '/footer.php'); ?>

最后是style.css及其执行代码：

.header-main { padding: 25px 20px 20px 20px; }
    .header-main .menu-trigger { display: block; float: left; width: 26px; height: 19px; background: url('../images/icons/menu.png') top center no-repeat; 
        background-size: contain; text-indent: -999999999px; overflow: hidden; margin-top: 5px; }
    .header-main .logo { display: none; float: right; width: 50%; height: 60px; background: url('../images/logo.png') top right no-repeat; 
        background-size: contain; text-indent: -999999999px; overflow: hidden; }

.menu-collapse-header { background: #464749; float: left; width: 100%; display: none; }
    .menu-collapse-header ul li a { background: #464749; color: #fff; padding: 15px; display: block; border-left: 8px solid #464749; }
    .menu-collapse-header ul li.current_page_item a { background: #57585a; border-left: 8px solid #57585a; }
    .menu-collapse-header ul li.current_page_ancestor a { background: #57585a; border-left: 8px solid #57585a; }
    .menu-collapse-header ul li a:hover {  background: #57585a; }

Answer 1

我已经在台式机以及手机/ android上对其进行了检查。实际上，在主页上，汉堡菜单一键式触发两次。可以将其视为一种接触，将其打开，而另一种接触将其关闭。有一些元素与汉堡包部分重叠，因此会中断触摸功能。

请尝试以下解决方案：

1）CSS clearfix修复了您的元素，可能会立即修复。

2）检查汉堡包后面的jQuery click事件，并确保仅触发一次，而不触发两次。它将帮助您交叉检查问题，并且可以相应地进行解决。

响应式菜单快速关闭

1 个答案: