How to remove the sub node from a list of a select

Question

I have a responsive menu on my site that some options should not appear when viewed through mobile.

                <ul class="sf-menu">
                <li><a href="#lk1">A gente!</a>
                    <ul>
                        <li><a href="#" id="btn-lk1-1">Como foi?</a></li>
                        <li><a href="#">O que falam?</a>
                            <ul>
                                <li><a href="#" id="btn-lk1-2-1">Dos projetos</a></li>
                                <li><a href="#" id="btn-lk1-2-2">Da EstruturaOnline</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#lk2">WWW o qu&ecirc;?</a></li>
                <li><a href="#lk3">Voc&ecirc;s</a></li>
                <li><a href="#lk4">Fizemos</a></li>
                <li><a href="#lk5">Fazemos</a></li>
                <li><a href="#lk6">Fale</a></li>
            </ul>

Above I have the menu in list format, but no q appear sub nodes, IE, should only appear the first level of LI.

In the following code I have the jQuery that transforms this list into select, but it brings all second and third levels, of which I do not want...

        (function($){
    $.fn.mobileMenu = function(options) {  
      var defaults = {
          defaultText: 'Navigate to...',
          className: 'select-menu',
          subMenuClass: 'sub-menu',
          subMenuDash: '–'
        },
        settings = $.extend( defaults, options ),
        el = $(this);
      this.each(function(){
        var $el = $(this),
          $select_menu;
        // ad class to submenu list
        $el.find('ul').addClass(settings.subMenuClass);
        // Create base menu
        var $select_menu = $('<select />',{
          'class' : settings.className + ' ' + el.get(0).className
        }).insertAfter( $el );
        // Create default option
        $('<option />', {
          "value"   : '#',
          "text"    : settings.defaultText
        }).appendTo( $select_menu );
        // Create select option from menu
        $el.find('a').each(function(){
          var $this   = $(this),
            optText = '&nbsp;' + $this.text(),
            optSub  = $this.parents( '.' + settings.subMenuClass ),
            len   = optSub.length,
            dash;
          // if menu has sub menu
          if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
            dash = Array( len+1 ).join( settings.subMenuDash );
            optText = dash + optText;
          }
          // Now build menu and append it
          $('<option />', {
            "value" : this.href,
            "html"  : optText,
            "selected" : (this.href == window.location.href)
          }).appendTo( $select_menu );
        }); // End el.find('a').each
        // Change event on select element
        $select_menu.change(function(){
          var locations = $(this).val();
          if( locations !== '#' ) {
            window.location.href = $(this).val();
          };
        });
        $('.select-menu').show();
      }); // End this.each
      return this;
    };
    })(jQuery);
    $(document).ready(function(){
        $('.sf-menu').mobileMenu();
    });

Can anyone help me with jQuery? I need only the first level of the list to appear when building select...

Answer 1

I managed to change the line "$el.find('a'). each(Function(){" to "$el.find('div'). each(Function(){" and in the list I put from "

To us!" for

Us!

I exchanged tbm some information from jQuery that used to take the Location from the A tag to the DIV tag ID and then I had the tbm link!

Thanks a lot!

Answer 2

Without changing the code in HTML and Jquery, you can in the css class add:

  .sf-menu li ul{
   display:none;
}

Here’s the Fiddle to test