如何以編程方式打開我的手風琴菜單

我正在使用一個非常簡單的jQuery手風琴腳本，但是我想實現的是以編程方式在頁面加載時打開菜單項的方法。最終，當用戶直接瀏覽子菜單中的頁面時，該菜單將打開以識別它們的位置。我只是無法弄清楚如何觸發負載開放...任何幫助表示讚賞。如何以編程方式打開我的手風琴菜單

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery navigation test 2</title> 

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> 


<style> 

#nav { 
    float: left; 
    width: 280px; 
    border-top: 1px solid #999; 
    border-right: 1px solid #999; 
    border-left: 1px solid #999; 
} 
#nav li a { 
    display: block; 
    padding: 10px 15px; 
    background: #ccc; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #999; 
    text-decoration: none; 
    color: #000; 
} 
#nav li a:hover, #nav li a.active { 
    background: #999; 
    color: #fff; 
} 
#nav li ul { 
    display: none; 
} 
#nav li ul li a { 
    padding: 10px 25px; 
    background: #ececec; 
    border-bottom: 1px dotted #ccc; 
} 

</style> 
</head> 

<body> 
<ul id="nav"> 
    <li><a href="#">Menu 1</a> 
    <ul> 
     <li><a href="#">Sub-Item 1 a</a></li> 
     <li><a href="#">Sub-Item 1 b</a></li> 
     <li><a href="#">Sub-Item 1 c</a></li> 
    </ul> 
    </li> 
    <li><a href="https://google.com">Link 1</a> 
    </li> 
    <li><a href="#">Menu 2</a> 
    <ul> 
     <li><a href="#">Sub-Item 3 a</a></li> 
     <li><a href="#">Sub-Item 3 b</a></li> 
     <li><a href="#">Sub-Item 3 c</a></li> 
     <li><a href="#">Sub-Item 3 d</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
    <ul> 
     <li><a href="#">Sub-Item 4 a</a></li> 
     <li><a href="#">Sub-Item 4 b</a></li> 
     <li><a href="#">Sub-Item 4 c</a></li> 
    </ul> 
    </li> 
    <li><a href="https://google.com">Link 2</a> 
    </li> 
</ul> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#nav > li > a').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $(this).next().slideToggle(); 
     $(this).addClass('active'); 
    } 
    else { 
     $(this).next().slideToggle(); 
     $('#nav li a').removeClass('active'); 
    } 
    }); 

}); 

</script> 
</body> 
</html>

來源

2015-09-01 Joel Bondoux

您可以在活動類手動應用的元素，然後在文件準備的slideToggle與活躍類的元素。例如：

在HTML：

<li><a href="#" class="activate-on-load">Menu 3</a> 
    <ul> 
    <li><a href="#">Sub-Item 4 a</a></li> 
    <li><a href="#">Sub-Item 4 b</a></li> 
    <li><a href="#">Sub-Item 4 c</a></li> 
    </ul> 
</li>

而在JavaScript部分：

$(document).ready(function() { 

    $('#nav > li > a').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $(this).next().slideToggle(); 
     $(this).addClass('active'); 
    } 
    else { 
     $(this).next().slideToggle(); 
     $('#nav li a').removeClass('active'); 
    } 
    }); 

    var toActivate = $('.activate-on-load'); 
    toActivate.next().slideToggle(); 
    toActivate.addClass('active'); 

});

這應該工作。

我也建議是增加額外的課程對那些菜單元素，而不是使用這種複合選擇。

來源

2015-09-01 13:51:07 Voreny

感謝所有的建議 - 這是一個我去了，雖然和它工作得很好。 –

只要將代碼放在$(document).ready(function() { ... });內，就可以使其在加載時運行（文檔準備就緒後）。要打開正確的手風琴，您可以使用window.location來獲取您的URL，以確定用戶所在的頁面並相應地打開手風琴。

通過將id添加到菜單中，可以更輕鬆地進行此操作，以便您輕鬆選擇並打開它。

來源

2015-09-01 13:51:33 bransonl

你必須使用location或pathname（這是由你），以便與您的手風琴HREFs比較當前網頁。

Here is an exemple

加js：

var pagePath = window.location.pathname; // To be used 
var splitedPath = pagePath.split("/"); //Split to match your href formating 


//Find A tag that match your path, find its parent UL and the A tag before (the one which has click event); 
$("#nav > li > ul > li > a[href='" + splitedPath[splitedPath.length - 1] + "']").closest("ul").prev("a").trigger("click");

首先得到該位置/路徑
拆分它，以符合當前的href格式化
選擇父A到模擬點擊

來源

2015-09-01 14:10:10 EdenSource

如何以編程方式打開我的手風琴菜單

回答

相關問題