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

Javascript jQuery导航-需要定位和手风琴行为方面的帮助吗,javascript,jquery,Javascript,Jquery,这里的侧栏导航:需要一些TLC 我正试图解决几个问题,需要一些帮助: 手风琴动作工作正常,但单行项目链接(不手风琴)无法正确链接到其页面。是什么阻止了这一切 打开手风琴(如收藏)时,如果将鼠标悬停在其下方的父链接上,则会突出显示其前面的整个部分 在特定页面上,有没有办法保持某个部分的打开状态 代码如下: HTML <ul id="menu" class="menu noaccordion"> <li><a class="m1" href="#">the col

这里的侧栏导航:需要一些TLC

我正试图解决几个问题,需要一些帮助:

  • 手风琴动作工作正常,但单行项目链接(不手风琴)无法正确链接到其页面。是什么阻止了这一切

  • 打开手风琴(如收藏)时,如果将鼠标悬停在其下方的父链接上,则会突出显示其前面的整个部分

  • 在特定页面上,有没有办法保持某个部分的打开状态

  • 代码如下:

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

    谢谢

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


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

    以下是您问题的答案:

    1)
    返回false语句正在阻止正常行为:

    if($('#' + parent).hasClass('noaccordion')) {
                $(this).next().slideToggle('normal');
                return false;
            }
    
    2) 添加
    清除:左到以下CSS选择器
    ul.menu li

    3) 是的,这可以使用Javascript实现,但需要做一点工作:)

    • 删除第三个
      if
      块,并
      返回false

    • 在一些CSS规则中添加了


    嗨,凯,谢谢你的帮助。工作得很好。当我们在一个小节链接上时,你有没有关于保持手风琴打开的建议?更新的fiddle:我想你可以做的是让你想要打开手风琴的页面有一些索引变量,然后调用openAccordion(idx)。这非常接近。它适用于第一段,但如果您位于第二段或第三段,则第一段将保持打开状态:。我是否需要做些什么来识别其他手风琴元素,以使它们正常工作?谢谢非常感谢您的帮助。第一段保持打开状态,因为openAccordion函数是用参数0硬编码的。我希望你能自己解决:)[但既然你没有,这里:]嗨,凯,太棒了。我希望我能获得更多的荣誉。非常感谢你的帮助。
    if($('#' + parent).hasClass('noaccordion')) {
                $(this).next().slideToggle('normal');
                return false;
            }