How does this accordeon scenario sound?



  • How does this code sound, and what's going on in it and for what? This will help adjust the code. Parts read it with the directory, but in general, it doesn't understand the source logic.

    $(function() {
        var Accordion = function(el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;
    
        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }
    
    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
            $this = $(this),
            $next = $this.next();
    
        $next.slideToggle();
        $this.parent().toggleClass('open');
    
        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }   
    
    var accordion = new Accordion($('#accordion'), false);
    

    });

    $(function() {
    var Accordion = function(el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;

    // Variables privadas
    var links = this.el.find('.link');
    // Evento
    links.on('click', {
      el: this.el,
      multiple: this.multiple
    }, this.dropdown)
    

    }

    Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el;
    $this = $(this),
    $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');
    
    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    };
    

    }

    var accordion = new Accordion($('#accordion'), false);
    });

    * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    body {
    background: #2d2c41;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
    }
    ul {
    list-style-type: none;
    }
    a {
    color: #b63b4d;
    text-decoration: none;
    }
    /** =======================

    • Contenedor Principal
      ===========================*/

    h1 {
    color: #FFF;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-top: 80px;
    }
    h1 a {
    color: #c12c42;
    font-size: 16px;
    }
    .accordion {
    width: 100%;
    max-width: 360px;
    margin: 30px auto 20px;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    .accordion .link {
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }
    .accordion li:last-child .link {
    border-bottom: 0;
    }
    .accordion li i {
    position: absolute;
    top: 16px;
    left: 12px;
    font-size: 18px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }
    .accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 16px;
    }
    .accordion li.open .link {
    color: #b63b4d;
    }
    .accordion li.open i {
    color: #b63b4d;
    }
    .accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    /**

    • Submenu
      -----------------------------*/

    .submenu {
    display: none;
    background: #444359;
    font-size: 14px;
    }
    .submenu li {
    border-bottom: 1px solid #4b4a5e;
    }
    .submenu a {
    display: block;
    text-decoration: none;
    color: #d9d9d9;
    padding: 12px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    }
    .submenu a:hover {
    background: #b63b4d;
    color: #FFF;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <h1>Smooth Accordion Dropdown Menu Demo</h1>
    <!-- Contenedor -->
    <ul id="accordion" class="accordion">
    <li>
    <div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i>
    </div>
    <ul class="submenu">
    <li><a href="#">Photoshop</a>
    </li>
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    </ul>
    </li>
    <li>
    <div class="link"><i class="fa fa-code"></i>Coding<i class="fa fa-chevron-down"></i>
    </div>
    <ul class="submenu">
    <li><a href="#">Javascript</a>
    </li>
    <li><a href="#">jQuery</a>
    </li>
    <li><a href="#">Ruby</a>
    </li>
    </ul>
    </li>
    <li>
    <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i>
    </div>
    <ul class="submenu">
    <li><a href="#">Tablet</a>
    </li>
    <li><a href="#">Mobile</a>
    </li>
    <li><a href="#">Desktop</a>
    </li>
    </ul>
    </li>
    <li>
    <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i>
    </div>
    <ul class="submenu">
    <li><a href="#">Google</a>
    </li>
    <li><a href="#">Bing</a>
    </li>
    <li><a href="#">Yahoo</a>
    </li>
    </ul>
    </li>
    </ul>



  • var Accordion = function(el, multiple) {
    

    We'ate a class with a name. Accordion and with the designer, the host two parameters - el(JQuery-sector) and multiple(boolean). inside the designer:

    this.el = el || {};
    

    Reaching properties el either a single element transferred as a designer &apos; s argument or if the value of the argument can be equated to a false (null, undefined, 0, NaN, etc.) is an empty object({}) The author was probably lazy to arrange a full-scope examination and issue an exception.

    this.multiple = multiple || false;

    If the multiple argument can be concomitant to the true, then it is a single name. Otherwise, we are misappropriated. Unexplained verification - the author probably wrote it on the machine, for example, with the pros.

    // Variables privadas

    Comment in Spanish "local variables." The author is probably Mexican or Spanish.

    var links = this.el.find('.link');

    Apply variable links class element .linksfound inside the element $this.el

    // Evento

    Comment on the occasion in Spanish

    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)

    We're hanging the processor. this.dropdown() I'm going to the 'click' event. As additional data, we transmit the object with properties el and multiple

    Accordion.prototype.dropdown = function(e) {

    We're building a prototype class method. dropdown Class Accordion

    var $el = e.data.el;
    $this = $(this),
    $next = $this.next();

    Apply local variables $el$this$next Indicator values e.data.el(sighs)el transmitted as additional data) $(this)(current selter element) and $this.next()(element following current)

    $next.slideToggle();

    We call for the following current element http://api.jquery.com/slidetoggle/

    $this.parent().toggleClass('open');

    Add or delete class open higher unit

    if (!e.data.multiple) {

    If e.data.multiple You can be quoted to false

    $el.find('.submenu').not($next).slideUp().parent().removeClass('open');

    Found inside the element. $el class elements .submenu, removed from the search results the element of the $next (which should not be the case) is summoned by the slideUp after which their parent class is removed open

    var accordion = new Accordion($('#accordion'), false);

    We're building a copy of the object of the Accordion, so we're doing its design.


    It's a terrible code. Perhaps at the time of writing, his author had absolutely no understanding of the appointment and application of the PLO, the knowledge of the jQuery library, and indeed JavaScript.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2