jQuery导航 - 需要定位和手风琴行为的帮助

侧边栏导航在这里：http://dev.southernlivingplants.com/in_the_garden需要一些TLC。jQuery导航 - 需要定位和手风琴行为的帮助

有一对夫妇的，我试图解决问题，可以使用一些帮助：

手风琴行动工作正常，但单一的订单项链接（不手风琴）不正确链接到他们的页面。什么是预防呢？
使用手风琴打开（如The Collection），如果将鼠标悬停在其下方的父链接上找到您的Zone，它会突出显示它之前的整个部分。
有没有办法在特定页面上保留部分？

这里是代码：

的HTML

<ul id="menu" class="menu noaccordion"> 
<li><a class="m1" href="#">the collection</a> 
    <ul> 
     <li><a href="http://dev.southernlivingplants.com/shrubs/">shrubs</a></li> 
     <li><a href="http://dev.southernlivingplants.com/groundcovers_grasses/">groundcovers/<br />grasses</a></li> 

     <li><a href="http://dev.southernlivingplants.com/trees/">trees</a></li> 
     <li><a href="http://dev.southernlivingplants.com/tropicals/">tropicals</a></li> 
     <li><a href="http://dev.southernlivingplants.com/fall_bulbs/">fall bulbs</a></li> 
     <li><a href="http://dev.southernlivingplants.com/spring_bulbs/">spring bulbs</a></li> 
     <li><a href="http://dev.southernlivingplants.com/annuals/">annuals</a></li> 
     <li><a href="http://dev.southernlivingplants.com/perennials/">perennials</a></li> 

    </ul> 
</li> 
<li><a class="m2" href="http://dev.southernlivingplants.com/find_your_zone">find your zone</a></li> 
<li><a class="m3" href="#">in the garden</a> 
    <ul> 
     <li><a href="http://dev.southernlivingplants.com/care_tips/">care tips</a></li> 
     <li><a href="http://dev.southernlivingplants.com/color_guide/">color guide</a></li> 

     <li><a href="http://dev.southernlivingplants.com/common_pests/">common pests</a></li> 
    </ul> 
</li> 
<li><a class="m4" href="http://dev.southernlivingplants.com/where_to_buy">where to buy</a></li> 
<li> 
    <a class="m5" href="#">about us</a> 
    <ul> 
     <li><a href="http://dev.southernlivingplants.com/history">history</a></li> 
     <li><a href="http://dev.southernlivingplants.com/media_room/">media room</a></li> 
     <li><a href="http://dev.southernlivingplants.com/events">events</a></li> 
     <li><a href="http://dev.southernlivingplants.com/botanical_gardens">botanical gardens</a></li> 
     <li><a href="http://dev.southernlivingplants.com/testimonials">testimonials</a></li> 
    </ul> 
</li> 
<li><a class="m6" href="http://dev.southernlivingplants.com/video/">plant videos</a></li> 
<li><a class="m7" href="http://dev.southernlivingplants.com/contact_us">contact us</a></li> 
</ul>

的JavaScript：

function initMenus() { 
    $('ul.menu ul').hide(); 
    $.each($('ul.menu'), function(){ 
     $('#' + this.id + '.expandfirst ul:first').show(); 
    }); 
    $('ul.menu li a').click(
     function() { 
      var checkElement = $(this).next(); 
      var parent = this.parentNode.parentNode.id; 

      if($('#' + parent).hasClass('noaccordion')) { 
       $(this).next().slideToggle('normal'); 
       return false; 
      } 
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
       if($('#' + parent).hasClass('collapsible')) { 
        $('#' + parent + ' ul:visible').slideUp('normal'); 
       } 
       return false; 
      } 
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#' + parent + ' ul:visible').slideUp('normal'); 
       checkElement.slideDown('normal'); 
       return false; 
      } 
     } 
    ); 
} 
$(document).ready(function() {initMenus();});

的CSS：

ul.menu, ul.menu ul { 
    list-style-type:none; 
    margin: 0; 
    padding: 0; 
    width: 10em; 
    float: left; 

} 

ul.menu a { 
    display: block; 
    text-decoration: none; 
    font-size: 15px; 
    color: #54301A; 
} 

ul.menu li { 
    margin-top: 1px; 
    border-bottom: 1px solid #54301A; 
} 

ul.menu li a { 
/* background: #f8f2e3; */ 
    color: #000; 
    padding: 0.5em; 
} 

ul.menu li a:hover { 
    background: #f8f2e3; 
} 

ul.menu li ul li { 
    border-bottom: 1px dotted #54301A; 
} 

ul.menu li ul li a { 
    /* background: #f8f2e3; */ 
    color: #000; 
    padding-left: 15px; 
} 

ul.menu li ul li a:hover { 
    background: #f8f2e3; 
/* border-left: 5px #000 solid; */ 
    padding-left: 15px; 
}

谢谢！

来源

2011-06-28 fmz

http://jsfiddle.net/JVwTB/

删除了第三if块，并return false;
新增>到你的一些CSS规则

来源

2011-06-28 15:16:28 kei

箕您好，感谢您的帮助。完美工作。当我们在分段链接中时，您是否有建议让手风琴保持打开状态？ – fmz

更新的小提琴：http：// jsfiddle。net/JVwTB/1 /我猜你可以做的是让你想让手风琴打开的页面有一些索引变量，然后调用openAccordion（idx）。 – kei

这非常接近。它适用于第一个细分受众群，但如果您位于第二个或第三个细分受众群，则第一个细分受众群仍处于开放状态：http://dev.southernlivingplants.com/care_tips/。有什么我需要做的，以确定其他手风琴元素，让他们正常工作？谢谢。我非常感谢你的帮助。 – fmz

希望我有一个更清晰的答案，但它看起来像你的.click()函数正在消耗点击事件，并没有传递给元素本身。通常这是通过调用stopPropagation()明确完成的，但由于您在这里没有这样做，我会认为该事件仍会触发href。

也许你可以在if语句if($('#' + parent).hasClass('noaccordion')) ...附近的javascript中明确地重定向浏览器，作为一种解决方法。

来源

2011-06-28 15:05:03 jefflunt

以下是回答您的问题：

1）return false;声明下面的代码会阻止正常的行为：

if($('#' + parent).hasClass('noaccordion')) { 
      $(this).next().slideToggle('normal'); 
      return false; 
     }

2）添加clear: left;以下CSS选择器

3）是的，这是可能使用Javascript，但需要一点点的工作:)

来源

2011-06-28 15:12:56 ovi

jQuery导航 - 需要定位和手风琴行为的帮助

回答

相关问题