开发者

jQuery selection for collapse all ul elements minus one

I have the following HTML:

  <div>
         <span>Tecnology</span>
         <ul id="menu">
            <li>
                <a href="#">Multimedia</a>
                <ul>
                    <li>Videocameras</li>
                    <li>Cameras</li>
                    <li>MP3 and MP4</li>
                </ul> 
            </li> 
                <li>
                <a href="#">Telephony</a>
                <ul>
                    <li>Mobile Phones</li>
                </ul> 
            </li> 
         </ul>
    </div>

for other hand I have a JavaScript variable which has a value that can be Multimedia" or "Telephony" or other themes...

I would need a jQuery sentence to select the ul that's below to the <a href> with matching text with these themes (to show the current theme I'm on, and collapse all the rest).

By the moment I have this jQu开发者_运维百科ery sentence that didn't work.

$("#menu ul").first().first().filter("not:contains('"+themename+"')").css("display", "none");


Not sure what element has the id menu, but assuming it is the surrounding div, then to select and hide the non matching lists you would need something like:

$('#menu a').not(':contains(" + themename + ")').next().hide();

And to show the relevant li:

$('#menu a:contains(" + themename + ")').next().show();

Actually you could simplify it by hiding all the li's then showing the one you want:

$('#menu ul ul').hide();
$('#menu a:contains(" + themename + ")').next().show();

To be honest it would be easier if you gave classes to the different levels of li and ul. It would also help in stopping possible future issues if for instance you had nested links with the same content.


Something like this:

$("#menu ul").not($("#menu a:contains(" + themename + ")").next());
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜