javascript - 使用动态箭头使用 jquery 在导航上切换类

Question

尝试更新箭头以在父 li 具有 .active 类时显示右箭头。

我有以下 jQuery:

jQuery(function(){
  initAccordion();
});

// accordion menu init
function initAccordion() {
  jQuery('.accordion').slideAccordion({
    opener: 'span.opener',
    slider: '> ul',
    animSpeed: 300
  });


    jQuery( "li.active.toggle-parent" ).each(function() {
        jQuery(this).find("i").addClass('fa-caret-right').removeClass('fa-caret-down');
        jQuery(".opener").click(function() {
            jQuery(this).find("i").toggleClass('fa-caret-right');
            jQuery(this).find("i").toggleClass('fa-caret-down');
        });
     });


}

        jQuery( "li.active.toggle-parent" ).each(function() {
            jQuery(this).find("i").addClass('fa-caret-right').removeClass('fa-caret-down');
            jQuery(".opener").click(function() {
                jQuery(this).find("i").toggleClass('fa-caret-right');
                jQuery(this).find("i").toggleClass('fa-caret-down');
            });
         });

    /*
     * jQuery Accordion plugin
     */
    ;(function($){
      $.fn.slideAccordion = function(opt){
        // default options
        var options = $.extend({
          addClassBeforeAnimation: false,
          allowClickWhenExpanded: false,
          activeClass:'active',
          opener:'.opener',
          slider:'hello',
          animSpeed: 300,
          collapsible:true,
          event:'click'
        },opt);

        return this.each(function(){
          // options
          var accordion = $(this);
          var items = accordion.find(':has('+options.slider+')');

          items.each(function(){
            var item = $(this);
            var opener = item.find(options.opener);
            var slider = item.find(options.slider);
            opener.bind(options.event, function(e){
              if(!slider.is(':animated')) {
                if(item.hasClass(options.activeClass)) {
                  if(options.allowClickWhenExpanded) {
                    return;
                  } else if(options.collapsible) {
                    slider.slideUp(options.animSpeed, function(){
                      hideSlide(slider);
                      item.removeClass(options.activeClass);
                    });
                  }
                } else {
                  // show active
                  var levelItems = item.siblings('.'+options.activeClass);
                  var sliderElements = levelItems.find(options.slider);
                  item.addClass(options.activeClass);
                  showSlide(slider).hide().slideDown(options.animSpeed);

                  // collapse others
                  sliderElements.slideUp(options.animSpeed, function(){
                    levelItems.removeClass(options.activeClass);
                    hideSlide(sliderElements);
                  });
                }
              }
              e.preventDefault();
            });
            if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
          });
        });
      };

      // accordion slide visibility
      var showSlide = function(slide) {
        return slide.css({position:'', top: '', left: '', width: '' });
      };
      var hideSlide = function(slide) {
        return slide.show().css({position:'absolute', top: -9999, left: -9999, width: slide.width() });
      };
    }(jQuery));

和 HTML(用 ExpressionEngine 编写):

{exp:structure:nav_advanced show_depth="4" start_from="/{segment_1}"}
    {if root:count == 1}
    <ul class="accordion list">
    {/if}
        <li class="{if root:active}active{/if} toggle-parent">
            <a href="{if root:redirect_page_external}{root:redirect_page_external}{if:else}{root:page_url}{/if}" {if root:redirect_page_target == 1}target="_blank"{/if}>{root:title} {if root:has_children}<span class="opener"> <i class="fa fa-caret-down" aria-hidden="true"></i></span>{/if}</a>
            {if root:has_children}
            <ul {if root:has_children}class="slide"{/if}>
                {root:children}
                    <li{if child:has_children} class="active"{/if}>
                        <a href="{if child:redirect_page_external}{child:redirect_page_external}{if:else}{child:page_url}{/if}" {if child:redirect_page_target == 1}target="_blank"{/if} {if child:active}class="active"{/if}>{child:title}</a>
                        {if child:has_children}
                        <ul>
                            {child:children}
                                <li {if grandchild:active} class="active"{/if}>
                                    <a href="{if grandchild:redirect_page_external}{grandchild:redirect_page_external}{if:else}{grandchild:page_url}{/if}" {if grandchild:redirect_page_target == 1}target="_blank"{/if} {if grandchild:active}class="active"{/if}>{grandchild:title}</a>
                                    {if grandchild:has_children}
                                    <ul>
                                        {grandchild:children}
                                            <li{if great_grandchild:active} class="active"{/if}>
                                                <a href="{if great_grandchild:redirect_page_external}{great_grandchild:redirect_page_external}{if:else}{great_grandchild:page_url}{/if}" {if great_grandchild:redirect_page_target == 1}target="_blank"{/if}>{great_grandchild:title}</a>
                                            </li>
                                        {/grandchild:children}
                                    </ul>
                                    {/if}
                                </li>
                            {/child:children}
                        </ul>
                        {/if}
                    </li>
                {/root:children}
            </ul>
            {/if}
        </li>
    {if root:count == root:total_results}
    </ul>
    {/if}
{/exp:structure:nav_advanced}

Answer 1

在您的 "function initAccordion() {" 中，您需要更改这些行:

 jQuery( "li.active.toggle-parent" ).each(function() {
    jQuery(this).find("i").addClass('fa-caret-right').removeClass('fa-caret-down');
    jQuery(".opener").click(function() {
        jQuery(this).find("i").toggleClass('fa-caret-right');
        jQuery(this).find("i").toggleClass('fa-caret-down');
    });
 });

到:

jQuery( "li.active.toggle-parent" ).each(function() {
    jQuery(this).find("i").addClass('fa-caret-right').removeClass('fa-caret-down');
});

jQuery(".opener").click(function() {
    jQuery(this).find("i").toggleClass('fa-caret-right fa-caret-down');
    jQuery(".opener").not(this).find("i").removeClass('fa-caret-right').addClass('fa-caret-down');
 });

并且您可以删除该函数之后的重复项。

jQuery(function(){
    initAccordion();
});

// accordion menu init
function initAccordion() {
    jQuery('.accordion').slideAccordion({
        opener: 'span.opener',
        slider: '> ul',
        animSpeed: 300
    });


    jQuery( "li.active.toggle-parent" ).each(function() {
        jQuery(this).find("i").addClass('fa-caret-right').removeClass('fa-caret-down');
    });

    jQuery(".opener").click(function() {
        jQuery(this).find("i").toggleClass('fa-caret-right fa-caret-down');
        jQuery(".opener").not(this).find("i").removeClass('fa-caret-right').addClass('fa-caret-down');
    });

}


/*
 * jQuery Accordion plugin
 */
;(function($){
    $.fn.slideAccordion = function(opt){
        // default options
        var options = $.extend({
            addClassBeforeAnimation: false,
            allowClickWhenExpanded: false,
            activeClass:'active',
            opener:'.opener',
            slider:'hello',
            animSpeed: 300,
            collapsible:true,
            event:'click'
        },opt);

        return this.each(function(){
            // options
            var accordion = $(this);
            var items = accordion.find(':has('+options.slider+')');

            items.each(function(){
                var item = $(this);
                var opener = item.find(options.opener);
                var slider = item.find(options.slider);
                opener.bind(options.event, function(e){
                    if(!slider.is(':animated')) {
                        if(item.hasClass(options.activeClass)) {
                            if(options.allowClickWhenExpanded) {
                                return;
                            } else if(options.collapsible) {
                                slider.slideUp(options.animSpeed, function(){
                                    hideSlide(slider);
                                    item.removeClass(options.activeClass);
                                });
                            }
                        } else {
                            // show active
                            var levelItems = item.siblings('.'+options.activeClass);
                            var sliderElements = levelItems.find(options.slider);
                            item.addClass(options.activeClass);
                            showSlide(slider).hide().slideDown(options.animSpeed);

                            // collapse others
                            sliderElements.slideUp(options.animSpeed, function(){
                                levelItems.removeClass(options.activeClass);
                                hideSlide(sliderElements);
                            });
                        }
                    }
                    e.preventDefault();
                });
                if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
            });
        });
    };

    // accordion slide visibility
    var showSlide = function(slide) {
        return slide.css({position:'', top: '', left: '', width: '' });
    };
    var hideSlide = function(slide) {
        return slide.show().css({position:'absolute', top: -9999, left: -9999, width: slide.width() });
    };
}(jQuery));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion list">

    <li class=" toggle-parent">
        <a href="/path-here">Nav Title </a>
    </li>
    <li class=" toggle-parent">
        <a href="/path-here">Nav Title </a>
    </li>
    <li class=" toggle-parent">
        <a href="/path-here">Nav Title </a>
    </li>
    <li class=" toggle-parent">
        <a href="/path-here">Nav Title </a>
    </li>
    <li class="active toggle-parent">
        <a href="/path-here">Nav Title <span class="opener"> <i class="fa fa-caret-right" aria-hidden="true"></i></span></a>
        <ul class="slide">
            <li>
                <a href="/path-here">Nav Title </a>
            </li>
            <li>
                <a href="/path-here">Nav Title </a>
            </li>
            <li>
                <a href="/path-here">Nav Title</a>
            </li>
        </ul>
    </li>
    <li class=" toggle-parent">
        <a href="/path-here">Nav Title <span class="opener"> <i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
        <ul class="slide" style="position: absolute; top: -9999px; left: -9999px; width: 305px;">
            <li class="active">
                <a href="/path-here">Nav Title</a>
                <ul>
                    <li>
                        <a href="/path-here">Nav Title</a>
                    </li>
                    <li>
                        <a href="/path-here">Nav Title </a>
                    </li>
                    <li>
                        <a href="/path-here">Nav Title</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>