CODEWITHSUNDEEP
javascriptjqueryhtml
Bazza DownUnder
Bazza DownUnder

Reputation: 65

Assistance required with dropdown menu

<li class="expandable">
    <div class="hitarea collapsable-hitarea">
        <i class="fa fa-chevron-up"></i>
</div>
<a href="/toilet-paper/" class="selected">Toilet Paper</a>
    <ul style="display: block;" class="expanded">
        <li><a href="/toilet-paper-office-commercial/">Office &amp; Commercial</a></li>
        <li class="last"><a href="/toilet-paper-domestic/">Domestic</a></li>
     </ul>
</li>

The above html shows:

Toilet Paper [DOWN ARROW]

I want to monitor the click event on the first a:

<a href="/toilet-paper/" class="selected">Toilet Paper</a>

Once that happens I want to prevent the event from happening and I also want to expand the sub menu by clicking on the "hitarea" class:

Toilet Paper [UP ARROW]
   -Office & Commercial
   -Domestic

My code:

   $( '.expandable a.eq(0)' ).click(function() {
       console.log( "Handler for .click() called." );
       event.preventDefault();
       $(this).parent().find('.hitarea').trigger('click');
   });

If I remove the .eq(0) it works but it lands in a loop.

Any help will be greatly appreciated.

Upvotes: 3

Views: 46

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Try the following:

$( '.expandable > a' ).click(function(e) {
    e.preventDefault();//prevent click
});
$('.hitarea ').click(function(){
    $(this).parent().find('ul').slideDown();//show list
});

with a single click:

$( '.expandable > a' ).click(function(e) {
    e.preventDefault();//prevent click
    $(this).parent().find('ul').slideDown();//show list
});

Upvotes: 1

Related Questions