jQuery: Toggle Dropdown Menu Possibility

Question

I have the following HTML below but what I was wanting to know is it possible to use the jQuery .toggle function to enable the main <li> heading Trails to be a link and then when you put the mouse over the main link Trails the other pages will show and you can click on the respective page.

HTML: - This HTML formatting is given by PYROCMS and I have no control over it

<li class="current">
        <a href="">Trials</a>
        <ul>
            <li class="first">
                <a href="">Link One</a>
            </li>
            <li>
                <a href="">Link Two</a>
            </li>
            <li>
                <a href="">Link Three</a>
            </li>
            <li class="last">
                <a href="">Link Four</a>
            </li>
        </ul>
    </li>

jQuery: - Could a variation of the below be used for the above issue?

$('select[name="domainTransfer"]').change(function() {

    $('#domainToBeTransfered,#domainToBeTransfered0').toggle($(this).val() === "yes");

    });

Baz1nga:

I have looked at your jsfiddle and noticed you have placed a display:none; on the sub <ul> I have placed that into my css the line is #wrapper #contentarea #blue_box .centerblue_txt ul li ul{ but it does not seem to interact with the jQuery.

jQuery(document).ready(function () {
    $(".current a").mouseenter(function(){
       $(this).siblings("ul").show();
    }).mouseout(function(){
       $(this).siblings("ul").hide();
    });​
});​

Answer 1

Baz1nga's solution isn't working for me in Opera. The list dies when the cursor transits from the heading to the list - hence the list can be viewed but its links can never be clicked.

You need to take special measures to see the cursor through the transition from element to element. This achieved with a timeout to delay very lightly the hiding of the list; and the canceling of the timeout each time the cursor passes over any element that should keep the list alive.

The code is moderately complex and looks like this:

function hideList($list) {
    clearTimeout($list.data('dropdown').tim);
    return setTimeout(function() {
        $list.stop(true).slideUp('slow');
    }, 125);
}

$("li.current").on('mouseover', "a.heading", function() {
    var $list = $(this).siblings("ul").slideDown('slow');
    clearTimeout($list.data('dropdown').tim);
}).on('mouseout', function() {
    var $list = $(this).children("ul");
    $list.data('dropdown').tim = hideList($list);
}).children("ul").on('mouseover', function() {
    clearTimeout($(this).data('dropdown').tim);
}).on('mouseout', function() {
    var $list = $(this);
    $list.data('dropdown').tim = hideList($list);
}).data('dropdown', {
    tim: null
}).hide();

See fiddle

Answer 2

$(".current a").mouseenter(function(){
   $(this).siblings("ul").show();
}).mouseleave(function(){
   $(this).siblings("ul").hide();
});

​

Is this what you want?

Demo: http://jsfiddle.net/rY8zm/