P
P
Pallada Pallada2020-09-10 21:18:04
JavaScript
Pallada Pallada, 2020-09-10 21:18:04

Why doesn't the javascript accordion menu code work on jquery-3.3.1.min.js?

Hello! help me figure out why the js of the additional accordion menu does not work.
I decided to switch to the version of the jquery-3.3.1.min.js library, query-1.12.4.min.js was previously included.
But after connecting the library, the add. The menu that previously worked stopped working, I can’t understand what’s wrong.
script code to connect:

(function($){
    $.fn.extend({
 
    //pass the options variable to the function
    accordion: function(options) {
        
        var defaults = {
            accordion: 'true',
            speed: 300,
            closedSign: '[+]',
            openedSign: '[-]'
        };
 
        // Extend our default options with those provided.
        var opts = $.extend(defaults, options);
        //Assign current element to variable, in this case is UL element
        var $this = $(this);
        
        //add a mark [+] to a multilevel menu
        $this.find("li").each(function() {
            if($(this).find("ul").size() != 0){
                //add the multilevel sign next to the link
                $(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
                
                //avoid jumping to the top of the page when the href is an #
                if($(this).find("a:first").attr('href') == "#"){
                    $(this).find("a:first").click(function(){return false;});
                }
            }
        });
 
        //open active level
        $this.find("li.active").each(function() {
            $(this).parents("ul").slideDown(opts.speed);
            $(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
        });
 
        $this.find("li a").click(function() {
            if($(this).parent().find("ul").size() != 0){
                if(opts.accordion){
                    //Do nothing when the list is open
                    if(!$(this).parent().find("ul").is(':visible')){
                        parents = $(this).parent().parents("ul");
                        visible = $this.find("ul:visible");
                        visible.each(function(visibleIndex){
                            var close = true;
                            parents.each(function(parentIndex){
                                if(parents[parentIndex] == visible[visibleIndex]){
                                    close = false;
                                    return false;
                                }
                            });
                            if(close){
                                if($(this).parent().find("ul") != visible[visibleIndex]){
                                    $(visible[visibleIndex]).slideUp(opts.speed, function(){
                                        $(this).parent("li").find("span:first").html(opts.closedSign);
                                    });
                                    
                                }
                            }
                        });
                    }
                }
                if($(this).parent().find("ul:first").is(":visible")){
                    $(this).parent().find("ul:first").slideUp(opts.speed, function(){
                        $(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
                    });
                    
                    
                }else{
                    $(this).parent().find("ul:first").slideDown(opts.speed, function(){
                        $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
                    });
                }
            }
        });
    }
});
})(jQuery);


The code that calls this script:
<script language="javascript">
$(document).ready(function() {
$(".topnav").accordion({
accordion:false,
speed: 400,
closedSign: '[+]',
openedSign: '[-]'
});
});
</script>


Additional menu code (called by remote code)
<!-- <block2> -->
<?if($CATEGORIES$)?>
<div class="block">
<div class="block-title cat-block-title"><?if($MODULE_ID$='load')?>Каталог акций<?else?>Каталог<?endif?></div>
<div class="block-content">$CATEGORIES$</div>
<ul class="topnav">
<?ifnot($MODULE_ID$="load")|($MODULE_ID$="publ")?>
$RCODE_1$<?endif?>
</div>
<?endif?>
<!-- </block2> -->

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question