Home/ Questions/Q 6833481
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:59:02+00:00

With the following code: <html> <head> <script type=text/javascript src=jquery-1.7.js></script> <script language=JavaScript> $(document).ready(function(){ $(‘#cssdropdown li.headlink’).hover(

  • 0

With the following code:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.js"></script>
    <script language="JavaScript">
        $(document).ready(function(){
            $('#cssdropdown li.headlink').hover(
                function() { $('ul', this).css('display', 'block'); },
                function() { $('ul', this).css('display', 'none'); });
        });
    </script>
</head>
<body>
    <ul id="cssdropdown">
        <li class="headlink">
            <a href="http://google.com/">Search Engines</a>
            <ul>
                <li><a href="http://google.com/">Google</a></li>
                <li><a href="http://yahoo.com/">Yahoo</a></li>
                <li><a href="http://live.com/">Live Search</a></li>
            </ul>
        </li>
        <li class="headlink">
            <a href="http://shopping.com">Shopping</a>
            <ul>
                <li><a href="http://amazon.com/">Amazon</a></li>
                <li><a href="http://ebay.com/">eBay</a></li>
                <li><a href="http://craigslist.com/">CraigsList</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

I can show a list on mouse over.

I want to show the lists on mouse click instead.
For instance, if I click on Search Engines, the Google, Yahoo and Live Search list will happear.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    $("UL UL").css("display", "none");

$(".title").click(function(e) {
    e.preventDefault();
   $(this).next("UL").toggle();
});

    I’ve added a class of title to each of your clickable items so that the code can be reused.

    Fiddle here

    • 0