Question

我在网页设计方面自学成才，所以我真的被困在这里，因为我没有理解问题的框架。我的网站（sealinesd.com）没问题，除了父链接应该在任何时候都被禁用。现在它的工作原理如下：

- 当常规无响应菜单启动时，由于我使用的插件（下面的代码），父链接被禁用。

- 当您将鼠标悬停在非响应式菜单上且父级已被禁用时，然后您将浏览器设置得更小，您之前悬停的响应式项目仍会被禁用。

- 当您直接转到响应式菜单而没有首先在非响应模式下悬停在父级上时，父链接不会被禁用。

我对jquery和DOM知之甚少，所以我无法修复插件。我试图定位平均菜单（用于响应模式）并使用document.ready来确保它没有太早执行，或者某些东西，但是对我来说都不起作用。请指教。我提前感谢你。

我用来禁用父链接的插件代码就在下面。

插件名称：高级禁用父菜单链接描述：允许您禁用父菜单链接的插件。作者：Kapil Chugh 插件URI：http://kapilchugh.wordpress.com/ 版本：1.0

  add_action('wp_footer', 'advanced_disable_parent_menu_link');

  function advanced_disable_parent_menu_link () {
    wp_print_scripts('jquery'); ?>
    <script type="text/javascript">
      if (jQuery("ul li.page_item:has(ul.children)").length > 0) {
        jQuery("ul li.page_item:has(ul.children)").hover(function () {
          jQuery(this).children("a").removeAttr('href');
          jQuery(this).children("a").css('cursor', 'default');
          jQuery(this).children("a").click(function () {
            return false;
          });
        });
      } else if (jQuery("ul li.menu-item:has(ul.sub-menu)").length > 0) {
        jQuery("ul li.menu-item:has(ul.sub-menu)").hover(function () {
          jQuery(this).children("a").removeAttr('href');
          jQuery(this).children("a").css('cursor', 'default');
          jQuery(this).children("a").click(function () {
            return false;
          });
        });
      }
    </script> <?php
  }

我也尝试过这段代码而且它没有用。我很沮丧。不知道如何定位那该死的响应式菜单。

wp_print_scripts('jQuery'); ?>
    <script type="text/javascript">
    jQuery(document).ready(function () {
    if (jQuery("nav.mean-nav > li:has(ul.children)").length > 0) {
        jQuery(".mean-nav > ul > li:has(ul.children)").hover(function () {
            jQuery(this).children("a").click(function(evt) {
            evt.preventDefault();
        });
            jQuery(this).children("a").css('cursor', 'default');
          }
});

Answer 1

我看了一下你的网站。它似乎是从一个创建了自己的响应功能的模板构建的。

就个人而言，我建议您考虑使用Bootstrap来构建自己的网页。 understand the 12 column grid system后，Bootstrap非常容易实现。

Bootstrap有响应式菜单，下拉菜单开箱即用，效果很好，see this example

您可以在很短的时间内使用bootstrap轻松复制模板外观，并且有大量资源可以在线帮助您。

无论如何，也就是说，如果您想要停止点击链接，导航到链接的href位置，您可以使用.preventDefault();这样：

＆＃13;

// prevent navigation when clicking links with the class preventDefault
$(document).on('click', '.preventDefault', function(e){
    e.preventDefault();
});
// just to show that other events still make it through
$('#test').click(function(){
    $('#result').append('click detected<br>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" class="preventDefault" id="test">Click this link</a><br>
<div id="result"></div>

＆＃13;

禁用父菜单项在响应中失败

1 个答案: