下拉菜单需要帮助

Question

<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>

上面的html显示：

Toilet Paper [DOWN ARROW]

我想在第一个a：

上监控点击事件

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

一旦发生这种情况，我想阻止事件发生，我还想通过点击“hitarea”类来扩展子菜单：

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

我的代码：

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

如果我删除.eq（0）它可以工作，但它会循环。

非常感谢任何帮助。

Answer 1

尝试以下方法：

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

只需点击一下

：

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