Question

我制作一个下拉菜单！它应该像这样工作 - 当下拉列表展开时，父母应该有一个chevron-up图标，当下拉列表折叠时，父母应该有一个V形图标。我执行以下代码，但它无法正常工作。为什么呢？

HTML：

<li class="property-trig-mobile"><a href="#"><i class="fa fa-circle"></i><span>PROPERTY</span>  <i class="fa fa-chevron-down chevron-trig"></i></a>
                    <ul class="ul-dropdown-mobile">
                        <li><a href="#"><i class="fa fa-home"></i><span>PROPERTY DETAILS</span></a></li>
                        <li><a href="#"><i class="fa fa-list"></i><span>FEATUTES</span></a></li>
                        <li><a href="#"><i class="fa fa-calendar-check-o"></i><span>SCHEDULE A SHOWING</span></a></li>
                        <li><a href="#"><i class="fa fa-print"></i><span>PRINT FLYER</span></a></li>
                        <li><a href="#"><i class="fa fa-calculator"></i><span>MORTGAGE CALCULATOR</span></a></li>
                        <li><a href="#"><i class="fa fa-file"></i><span>WALK SCORE</span></a></li>
                        <li><a href="#"><i class="fa fa-life-ring"></i><span>AERIAL VIEW</span></a></li>
                        <li><a href="#"><i class="fa fa-bar-chart"></i><span>CENSUS DATA</span></a></li>
                        <li><a href="#"><i class="fa fa-graduation-cap"></i><span>LOCAL SCHOOLS</span></a></li>
                        <li><a href="#"><i class="fa fa-file-pdf-o"></i><span>FLOOR PLANS</span></a></li>
                        <li><a href="#"><i class="fa fa-pencil-square-o"></i><span>DOCUMENTS</span></a></li>
                    </ul>
                </li>

这是我的jquery代码：

$('.property-trig-mobile a').on('click',function(){
            $(this).toggleClass('chev');
            $('.ul-dropdown-mobile').slideToggle(200);
            $('.chevron-trig').addClass('fa-chevron-up').removeClass('fa-chevron-down');

        });

        $('.property-trig-mobile a.chev').on('click',function(){
            $('.chevron-trig').addClass('fa-chevron-down').removeClass('fa-chevron-up');

        });

Answer 1

$('.property-trig-mobile a')上的点击事件适用于两者，使用.chev类锚定而不使用.chev类

您应该像$('.property-trig-mobile a:not(.chev)')

一样修改您的选择器

代码：

$('.property-trig-mobile a:not(.chev)').on('click', function () {
    $(this).toggleClass('chev');
    $('.ul-dropdown-mobile').slideToggle(200);
    $('.chevron-trig').addClass('fa-chevron-up').removeClass('fa-chevron-down');

});

$('.property-trig-mobile a.chev').on('click', function () {
    $(this).toggleClass('chev');
    $('.chevron-trig').addClass('fa-chevron-down').removeClass('fa-chevron-up');

});

Answer 2

您可以添加一个带旋转的类，然后点击它来切换它：

的CSS：

.rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

jquery的：

$('.property-trig-mobile a').on('click',function(){
    $(this).toggleClass('chev');
    $('.ul-dropdown-mobile').slideToggle(200);
    $('.chevron-trig').toggleClass('rotate');

});

你可以看到代码hier：http://codepen.io/anon/pen/pjXPyz

jQuery点击事件无法正常工作？我该怎么写？

2 个答案: