Question

此处的侧边栏导航：http://dev.southernlivingplants.com/in_the_garden需要一些TLC。

我正在尝试解决一些问题并可以使用一些帮助：

手风琴动作效果很好，但单行项目链接（不是手风琴）没有正确链接到他们的页面。是什么阻止了这个？
如果您将鼠标悬停在其下方的父链接上，请打开手风琴（如The Collection）。找到您的区域，它会突出显示之前的整个部分。
有没有办法在特定页面上打开某个部分？

这是代码：

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;
}

谢谢！

Answer 1

以下是您的问题的答案：

1）以下代码中的return false;语句阻止了正常行为：

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

2）将clear: left;添加到以下CSS选择器ul.menu li

3）是的，这可以使用Javascript，但需要一些工作：）

Answer 2

http://jsfiddle.net/JVwTB/

删除了第三个if块，return false;
为您的某些CSS规则添加了>

Answer 3

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

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

jQuery Navigation - 需要有关定位和手风琴行为的帮助

3 个答案: