Jquery Complex Selector, child of parent of matching class name toggle?
I downloaded a jquery collapsible panel script (used as a menu), which I've got working fine, however I am using it in conjunction with .NET and trying to have a certain panel based on the page you are viewing to expand it's panel, however I can't seem to select the thing no matter all the combinations I have tried. Here is what the HTML looks like:
<div class="collapsibleContainer app ui-widget" title="1990">
<div class="collapsibleContainerTitle app ui-widget-header">
<div>▸1990</div>
</div>
<div class="collapsibleContainerContent app ui-widget-content" style="display: none; ">
Text Stuff
</div>
</div>
Now on this script after I run the initial stuff, writing this line will successfully toggle all the panels:
$(".collapsibleContainerContent").slideToggle();
However, of course because there are multiples of these panels on a page, I don't want them all toggled, just the one that is relevant to the specific page I am viewing. I tried this like so:
$(".collapsibleContainerTitle.app.ui-widget-header:contains('<%= Decade %>')").parent().slideToggle();
$(".collapsibleContainer.app.ui-widget-header[title='<%= Decade %>'] > .collapsibleContainerContent").slideToggle();
Among a slew of other combinations. I never had to use selectors this complex before (at least for complex for me). How can I do? I need to select the .collapsibleContainerContent
and slideToggle() it that is wit开发者_Go百科hin the appropriate decade container.
I have confirmed that the .net variable being passed to the script is correct, when viewing the source it does say 1990. So what am I doing wrong? Thanks.
Edit: Clarification, the year is dynamic and that is what I have to match my data, so I need will be starting at least with the base select of either the Container by attribute title or ContainerTitle by :contains with the year, but I need to end with the ContainerContent selection so I can toggle it.
You need to re-write like this...
$(".collapsibleContainerTitle .app .ui-widget-header:contains('<%= Decade %>')").parent().slideToggle();
..the spaces are all-important!
$(".collapsibleContainerTitle.app.ui-widget-header:contains('<%= NoteDecade %>')").parent().children(".collapsibleContainerContent").slideToggle();
Did the trick.
精彩评论