Question

我最近开始使用这个网站，但这是我第一次发帖提问 - 谢谢大家！

我正在使用WordPress 3.5.2和WooCommerce 2.0.13并构建了我正在开发的大部分网站，但必须实施PayPal门户网站，以便为客户提供的产品选择。

使用我在标题中放置的主导航菜单，我在菜单项下方包含一条滑动线，表示它们中的哪一个是活动项。我还有一个AJAX重新加载器，所以我有许多点击功能（并非所有显示），以确保始终选择正确的活动元素。

请参阅以下代码：

    var $el, leftPos, newWidth,
    $mainNav = $("#menu-header-menu");

    $("#menu-header-menu a").click(function() {
    $(this).parent().siblings().removeClass("current_page_item");
    $(this).parent().addClass("current_page_item");
    $activeLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $activeLine.position().left)
    .data("origWidth", $activeLine.width());
    });

    $mainNav.append("<li id='active-line'></li>");
    var $activeLine = $("#active-line");

    $activeLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $activeLine.position().left)
    .data("origWidth", $activeLine.width());

     $("#menu-header-menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $activeLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
     }, function() {
    $activeLine.stop().animate({
        left: $activeLine.data("origLeft"),
        width: $activeLine.data("origWidth")
    });    
    });

和CSS

    #menu-header-menu {
        margin: 0 auto;
        list-style: none;
        position: relative;
        width: 960px; 
    }

    #menu-header-menu li {
        display: inline;
    }

    #menu-header-menu li a {
        color:#C8C8C8;
        display: block; 
        float: left; 
        padding: 6px 15px 4px 15px;
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        transition: color 0.6s ease-in 0s;
    }

    #active-line { 
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100px;
        height: 1px;
        background: white; }

这一切都完美无缺，直到我激活WooCommerce插件。此时功能检索宽度＆＃39; ＆＃34; .current_menu_item＆＃34;返回值0，而＆＃39; left＆＃39;值＆＃34; .current_menu_item a＆＃34;继续正常工作。看看Firebug中的网站，我可以看到#active_line仍然被追加，并且＆＃39;离开＆＃39;值继续根据代码更新和动画，＆＃39; width＆＃39;但是，值继续保持为0 。

问题似乎只是li元素的宽度值，因为如果我更改jQuery中的选择器来检索＆＃34; .current_page_item a＆＃34;的宽度。元素（或＆＃34;＃menu-header-menu li a＆＃34;对于悬停功能）jQuery开始返回正宽度＆＃39;价值，虽然不是我想要的！

我还可以强制执行＆＃39;＃menu-header-menu li＆＃39;通过添加：

来获得宽度值的元素

    #menu-header-menu li {
        width: 100px !important;
    }

奇怪的是（或者它并不奇怪，因为我无法弄清楚它为什么会这样做！），这就是宽度＆＃39;即使我从WooCommerce 禁用jQuery脚本和css文件，值仍继续停留在0 。

我有很多其他插件可以正常使用我的代码，我不知道这是什么!!!

提前全部谢谢!!

修改

好的，所以我设法与那些将临时网站放在一起的人联系，并将我所做的工作上传到那里的子域。请查看：http://test-site.paradisemusic.com.au/

使用WooCommerce时，导航菜单li元素没有宽度

0 个答案: