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導航 - 需要定位和手風琴行爲的幫助

回答

相關問題