面板從另一頁折疊（展開）

Question

我有一個帶有左側菜單的頁面，當用戶單擊鏈接時，該頁面會折疊/顯示內容。 使用我的示例中的href，data-target，data-collapse-group和data-togle可以完美地實現此效果： http : //jsfiddle.net/ns_19/rff70hfL/

工作代碼鏈接示例：

    <li style="font-size: small">
        <a href="#collapse2" data-target="#collapse2" 
        data-collapse- group="myDivs" data-toggle="collapse">
        Anti-Corruption Laws</a>
    </li>

JavaScript展開/折疊面板

$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data   ("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});

現在，我需要添加一個內容映射，該映射將直接鏈接到頁面上的每個面板。 如此處所示（內容映射-http://jsfiddle.net/ns_19/fsL7pntf/ ）。 我只能在默認面板展開的情況下訪問該頁面，但不能直接訪問當前折疊的其他任何面板。

我嘗試將href擴展為包含表單名稱，並在多個站點上搜索任何現有的已提交問題。 無論我選擇哪個鏈接，都只會顯示頁面的第一部分或默認部分。

我認為問題是被調用頁面上的JavaScript沒有收到執行該操作的價值。 有誰知道我如何通過嘗試訪問的頁面上的JavaScript捕獲和處理#Collapse？

請注意，這些頁面最初是用母版和內容設置的，但是由於jsfiddle的限制，這些頁面放在一起了。

Answer 1

我終於通過反復試驗弄清楚了。 但是，如果有人想提出改進建議，我將不勝感激。

這兩個文件中都需要進行一些修改：

1. 將ContentMap上的href更改為：（請注意，如果使用＃collapse2，則發送＃從未發送）。 對所有鏈接執行此操作。

    <a title="Insider Trading" href="../Forms/Assets.aspx?section=collapse2">Insider Trading</a> 

2. 在我的主頁的代碼后面，我添加了以下兩個代碼塊。 這僅檢查查詢字符串是否已傳遞特定部分，如果已傳遞，則在母版頁上設置隱藏字段的值。

    protected void Page_PreRender(object sender, System.EventArgs e) { NavToSection(); } protected void NavToSection() { List<string> keys = new List<string>(Request.QueryString.AllKeys); if(keys.Contains("section")) { this.HiddenMaster.Value = Request.QueryString["section"]; } } 

3. 在主頁上，我添加了隱藏字段和以下兩個JavaScript函數。 $(document).ready(checkCollapse); 當文檔“准備就緒”時，函數僅調用checkCollapse(jQuery)

    <input type="hidden" id="HiddenMaster" name="HiddenMaster" value="default" runat="server" /> function checkCollapse(jQuery) { var oValToCheck = document.getElementById('HiddenMaster').value; //get the value of the hidden field in the master "HiddenMaster" if (oValToCheck != 'default') { //If the HiddenMaster's value is not equal to 'default' then continue. var oCollapse = document.getElementById(oValToCheck); // Search the DOM for the object I am looking for to expand. var isTargetExpanded = $(oCollapse).hasClass('in'); // Check if section already is already expanded. Not really needed here anymore $(oCollapse).removeClass('collapse').addClass("in"); // expand selected target by changing the css classes assigned to it var $this = $(this); // get reference to this page. JQuery reference $this.data("target", "#" + oValToCheck); // assign the target //cycle through all "myDivs" and remove 'in' or add 'collapse' to any div where target is not equal to passed value $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () { $($(this).data("target")).removeClass("in").addClass('collapse'); }); } } $(document).ready(checkCollapse); // Execute the checkCollapse function once the document 'isready'