First of all nonsense, the jquery selector is really powerful!
Have a problem with Easyui in a project
As shown in the picture, the current page shows the "original message Query" page, when the left-hand navigation bar is selected is "re-text query." How to make the right menu and navigation on the left to achieve linkage that is: the left click on the "original message query", then the right side of the "Replacement arrival message" expansion, and select the "original message query", "background management" closed?
implemented in the following way：
1, the right side of the "original message query" and so used is the Easyui tabs control, viewing the API know that tabs has a onselect method, as long as in the Onselect method to write the things you want to do it.
2, the trigger event is found, then specifically how to achieve the desired effect?
Left-Hand navigation bar code results as shown above: The outermost is the Easyui accordion control, accordion has a lot of pannel, a pannel corresponds to a parent directory in Figure 1 and the subdirectory below it, such as "Replacement arrival Report" module. There are two Div in the panel,
The first div is the parent directory, and the second div contains many subdirectories.
When you first implement the tabs on the right, the navigation bar on the left is selected. First remove the selected state of all subdirectories, and then let the current subdirectory be selected.
Copy Code code as follows:
$ (' #idaccordion Li Div '). Removeclass ("selected");
$ (' #idaccordion span:contains ("' +title+ ') '). Parent (). Parent (). AddClass (" selected ");
3, the problem is that the selected is selected, but the parent menu of the selected submenu is not expanded. The panel in Easyui has a expand method, but how do you know which panel (both the parent menu) should be expanded? As shown in Figure 2: "Original message query" has been selected, and now let the replacement arrive to report this parent menu to expand. The first child of the sibling node of the ancestor node of the element span that contains the original message query is the node where the "reissue arrival Report" is located.
Copy Code code as follows:
if ($ (' #idaccordion span:contains ("' +title+ ') '). Length > 0) {
var accordiontitle = $ (' #idaccordion span:contains ("' +title+ ') '). Closest ('. Panel-body '). Prev (). Find ('. Panel-title '). Text ();
var p = $ (' #idaccordion '). Accordion (' Getpanel ', accordiontitle);
P.panel (' expand ');
}
First, in the descendant node ID idaccordion, look for spans containing text title (i.e. <span class= "icon icon-users" > Original message Query </span>). It then finds the nearest ancestor of class Panel-body and then finds the previous sibling node of the node (i.e. <div class= "Panel-header accordion-header Accordion-header-selected "style=" height:15px; width:161px; " >), and then find the node's class as a Panel-title node, get the text of this node, that is, "reissue arrival report."
The overall code is as follows：
Copy Code code as follows:
When a tab is selected on the right, the menu corresponding to the left is selected, and the accordion of the menu is expanded and the other accordion is closed
$ (' #tabs '). Tabs ({
Onselect:function (title) {
$ (' #idaccordion Li Div '). Removeclass ("selected");
$ (' #idaccordion span:contains ("' +title+ ') '). Parent (). Parent (). AddClass (" selected ");
if ($ (' #idaccordion span:contains ("' +title+ ') '). Length > 0) {
var accordiontitle = $ (' #idaccordion span:contains ("' +title+ ') '). Closest ('. Panel-body '). Prev (). Find ('. Panel-title '). Text ();
var p = $ (' #idaccordion '). Accordion (' Getpanel ', accordiontitle);
P.panel (' expand ');
}
}
});
The less commonly used is the closest method, which gets the closest parent element of an element, and a similar method parents,
the difference between the two is as follows：
Parents ([expr])
Gets a collection of elements that contain the ancestor elements of all matching elements (without the root element). You can filter by an optional expression.
The code is as follows
Copy Code code as follows:
$ (' #items '). Parents ('. Parent1 ');
Closest ([expr])
Closest first checks whether the current element matches, and returns the element itself if it matches. If it does not match, look up the parent element, one level up, until you find the element that matches the selector. If nothing is found, an empty jquery object is returned.
Copy Code code as follows:
$ (' #items1 '). Closest ('. Parent1 ');
The main differences between closest and parents are: 1, the former from the current element to match the search, the latter from the parent element to match the search, 2, the first step up until found the matching element stopped, the latter has been looking up until the root element, and then put these elements into a temporary collection, Filtering with the given selector expression, 3, which returns 0 or 1 elements, which may contain 0, 1, or more elements.
Closest is useful for handling event delegation.
