Home/ Questions/Q 7828755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T10:28:23+00:00

I Have Following codes: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script> <script

  • 0

I Have Following codes:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $("#ThisClick").anycommand();
    </script>
</head>
<body>
<ul id="TopUl">
    <li>First<ul>
        <li>One<ul>
            <li>liA1</li>
            <li>liA2</li>
        </ul>
        </li>
        <li>Two<ul>
            <li id="ThisClick">liB1</li>
            <li>liB2</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>Second<ul>
        <li>li1<ul>
            <li>liF1</li>
            <li>liF2</li>
        </ul>
        </li>
        <li>li2</li>
    </ul>
    </li>
</ul>
</body>
</html>

I need collaps all UL’s that are not parents of liB1 (#ThisClick) when clicking.
In other words by click on liB1 I want have following code:

<ul id="TopUl">
    <li>First<ul>
        <li>One<ul style="display:none">
            <li>liA1</li>
            <li>liA2</li>
        </ul>
        </li>
        <li>Two<ul>
            <li id="ThisClick">liB1</li>
            <li>liB2</li>
        </ul>
        </li>
    </ul>
    </li>
    <li>Second<ul style="display:none">
        <li>li1<ul style="display:none">
            <li>liF1</li>
            <li>liF2</li>
        </ul>
        </li>
        <li>li2</li>
    </ul>
    </li>
</ul>

Then Jquery may collapse all not parented UL tags.
What is the solution? how can I do for this propose?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This icky looking selector should work:

    $("ul :not(:has(#ThisClick))").hide();

    References: :not() and :has()

    So, this bit of code will make all the elements that are not parents of the element you clicked, hide. Change the first selector ($("#ThisClick")) as needed, right now it only works on the <li> that you’ve specified the ThisClick ID on, and you can only use an ID once.

    $("#ThisClick").click(function() {
    $("ul :not(:has(this))").hide();
});

    To make this work on all <li>s that are in your <ul>, you could do this:

    $("#TopUl li").click(function() {
    $("ul :not(:has(this))").hide();
});

    This adds the click event to all <li>s in your list.

    • 0