Question

I'm having an issue with expanding/collapsing a menu. On the menu, I am trying to do two things: First is to expand/collapse all. That is working just fine. For reference, my code is below:

$("#expandAll dt a").click(function () {
                $("dd").slideToggle();
            });

I am simply asking it to apply the slidetoggle function to all dd tags.

I also want to expand a single item on the list while the rest stays collapsed. However, when I do that, it will expand the entire list EXCEPT for the one I want, the exact opposite behavior I'm looking for. The code for the individual piece is below:

function excol() {
    $("#expand dt a").click(function () {
        $(this).parent().siblings("dd").slideToggle();
    });
}

My 'this' statement should read "Toggle up/down a single element with the tag dd that are siblings of this element's parent." The problem is, it toggles every single dd except for the one I want to toggle.

Below is the relevant jquery code:

       //Upon successful ajax call
    success: function (data) {


        excol();

        $("#expandAll dt a").click(function () {
            $("dd").slideToggle();
        });
    },

});

}

function excol() {
$("#expand dt a").click(function () {
    $(this).parent().siblings("dd").slideToggle();
});
}

Here is the html code:

<div id="expandAll">

                <dl>
                    <dt>
                        <a style="font-size: 12px; color: black;"     href="#">Expand/Collapse All</a>
                    </dt>
                </dl>

                <div id="expand">
                    <div id="mhsPrograms">
                        <div id="MHS">
                        </div>
                    </div>
                    <br />
                </div>
</div>

I think I'm pretty close to the solution but there is a conflict someplace that I'm not seeing. Any help would be appreciated.

Answer 1

知道了！问题是展开全部扩展功能。我没有把所有的代码放在这里，因为我认为它不相关......我现在看到了我的方式的错误，并将它发布。无论如何，我需要将扩展/折叠所有功能放入我的文档就绪功能中。所以我的代码看起来像这样：

$(document).ready(function () {
//Call process function
processListItems(Url, Listname);
excolAll();
//*************************
//processListItems function
//*************************


});

function processListItems(url, listname, complete, failure) {
// Executing our items via an ajax request 
$.ajax({
    url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?    $orderby=SortOrder",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    //Upon successful ajax call
    success: function (data) {

        ewiArray(data);
        excol();
        //excolAll();
        joinAll();

    },
});
}

//complete(data);// Returns JSON collection of the results                   

//Function for expanding/collapsing menu
function excol() {
$("#expand dt a").click(function () {
    $(this).parent().siblings("dd").slideToggle();
});
}

//Function for expanding/collapsing all
function excolAll() {
$("#expandAll dt a").click(function () {
    $("dd").slideToggle();
});
}

//Function for joining EWI program to its associated description
function joinAll() {
$("button").click(function () {
    var fired_button = $(this).val();
    sessionStorage.setItem('ewiNum', fired_button);
    window.location.href = "Application.aspx";
    return false;
});
}

exolAll（）是问题函数。我仍然不完全理解这些操作，但它现在有效。

完整代码如下：

Min_Node(pos)

Expanding/'collapsing all vs. individual

1 个答案:

Expanding/&#39;collapsing all vs. individual

1 个答案:

Expanding/'collapsing all vs. individual