讓jquery下拉菜單在網站的新頁面上打開

我有一種下拉菜單。但是當我點擊一些子菜單鏈接時，我的網站的新頁面打開，但菜單正在關閉。但是在網站的活動菜單的新頁面上必須打開！我認爲有必要找到活動菜單，然後使用ajax代碼刪除style =「display：none」。但是我有一些困難。讓jquery下拉菜單在網站的新頁面上打開

我試圖實現我有什麼簡單的方法上的jsfiddle：Example

HTML：

<ul id="menu"> 
    <li> <a href="javascript:void(0);" class="clickme">Click me 1</a> 

     <ul style="display:none"> 
      <li><a href="#">Dropdown link</a> 

      </li> 
      <li><a href="#">Dropdown link</a> 

      </li> 
     </ul> 
     <li> <a href="javascript:void(0);" class="clickme">Click me 2</a> 

      <ul style="display:none"> 
       <li><a href="#">Dropdown link</a> 

       </li> 
       <li><a href="#">Dropdown link</a> 

       </li> 
      </ul> 
     </li> 
</ul>

AJAX：

$(document).ready(function() { 

    $('#menu li > a').click(function (e) { 

     if ($(this).next('ul').length > 0) { 

      e.preventDefault(); 

      var subNav = $(this).next('ul'); 

      if (subNav.is(':visible')) { 
       subNav.slideUp('normal') 
       $(this).removeClass("selected"); 
      } else { 
       $('#menu ul:visible').slideUp('normal'); 
       subNav.slideDown('normal'); 
       $("a.selected").removeClass("selected"); 
       $(this).addClass("selected"); 
      } 
     } 
    }); 
});

感謝您的幫助！

來源

2014-10-01 Mia

甚至不確定這是可能的，如果你打開一個新的頁面。有趣。 – 2014-10-01 11:27:24

我很困惑。你在這裏發佈的代碼不是Ajax，它只是JQuery。您是使用Ajax還是使用正常的超鏈接將用戶帶到所選頁面？另外，你還可以包括你的CSS？我看到你刪除了一個'selected'類，但是我沒有看到這個CSS。 – xDaevax 2014-10-01 13:16:33

給你的下拉菜單鏈接HREF一個額外的主題標籤參數

<a class="dropdown-class-name" href="http://www.yourpage/#dropdown-link-name">Dropdown link</a>

也給你dropdownlink一個獨特的類名。
給下拉UL也是一個獨特的類名

<ul class="sub-level-1" style="display:none">
當新頁面加載，檢查URL包含文本＃下拉鍊接名稱，如果確實如此，設置下拉元素的樣式爲display：block
```
$(document).ready(function() { 
    if (window.location.href.indexOf("#dropdown-link-name") > -1) { 
     $('.dropdown-class-name').closest(".sub-level-1").css("display","block"); 
    } 
}); 
```
這樣，你必須做出對每個子塊一個新的jQuery就緒功能。我不能給你一個jsfiddle，但我在本地測試它，它的工作原理。

來源

2014-10-01 12:34:55

非常感謝你，但是這段代碼打開了所有的菜單，但是我只需要保持打開只有活動的一個 – Mia 2014-10-01 13:16:52

哦，非常感謝。你爲我節省了很多時間。我非常感謝你的幫助！ :) – Mia 2014-10-01 14:31:01

你可以做這樣的事情：

查找URL當前路徑和在此基礎上，你可以刪除display:none財產。

var path = window.location.pathname; 
path = path.replace(/\/$/, ""); 
path = decodeURIComponent(path); 

$("#menu li a").each(function() { 
    var href = $(this).attr('href'); 
    if (path.substring(0, href.length) === href) { 
     $(this).closest('li').css('display:none'); 
    } 
});

注意：未經測試

來源

2014-10-01 11:43:12

你應該有某種腳本來呈現你這個菜單，不是嗎？我會考慮一個解決方案，在該解決方案中，您的菜單呈現腳本將爲您所在的菜單項的所有父項分配「打開」類，併爲此項目本身「激活」。然後你可以隱藏/顯示純CSS，沒有任何JS。這也適用，如果你真的不允許用戶通過鏈接去。

來源

2014-10-01 11:44:10 Kintar

讓jquery下拉菜單在網站的新頁面上打開

回答

相關問題