javascript - jQuery SmartMenus special functionality -

i implementing smartmenus on website , need add advanced functionality when in mobile-state.

the default behavior of smartmenus expand item on first click no matter click , collapse when clicking minus button; if click anywhere else activate link.

below desired effects:

1. expanding 1 menu item should collapse other open items
2. expanding/collapsing should activated only using plus or minus buttons; clicking anywhere else should take url
3. expanding menu item should keep within view user on mobile

in js code see comments such // 1 // correspond items listed above.

i have been trying quite time , have been able achieve functionality of 1+3 or 2+3. 1+2 seem conflicting somehow cannot figure out smartmenus architecture , it's expectations.

any guidance @ appreciated.

do note stackoverflow code snippet seems prevent going of urls clicked in smartmenu might need bring code computers local environment.

$(function() {    // start smartmenu    var $mainmenu = $('#main-menu');    $mainmenu.smartmenus({      collapsibleshowfunction: function($ul, complete) {        // 3 //        // apply scrollto() function        // mobile users can expand/collapse menu        // without losing spot        $ul.slidedown(200, function() {          complete();          // auto scroll parent item          $(window).scrollto($ul.datasm('parent-a'), 500);        });      }    });        // 1 //    // when smartmenu item expanded others collapsed    $('#main-menu').on('click.smapi', function(e, a) {      if ($mainmenu.data('smartmenus').iscollapsible()) {        if ($(a).datasm('sub') && !$(a).datasm('sub').is(':visible')) {          $mainmenu.data('smartmenus').itemactivate($(a), true);          return false;        }      }    });      // 2 //    // expand sub-menus when .sub-arrow clicked    $mainmenu.on('click', 'span.sub-arrow', function(e) {      if ($mainmenu.data('smartmenus').iscollapsible()) {        $(this).parent().closest('li').datasm('sub').datasm('arrowclicked', true);      }    }).on('beforeshow.smapi', function(e, ul) {      if ($mainmenu.data('smartmenus').iscollapsible()) {        if (!$(ul).datasm('arrowclicked')) {          return false;        }        $(ul).removedatasm('arrowclicked');      }    });        // fancy hamburger icon animated x    var $mainmenustate = $('#main-menu-state');    if ($mainmenustate.length) {      // animate mobile menu      $mainmenustate.change(function(e) {        var $menu = $mainmenu;        if (this.checked) {          $menu.hide().slidedown(400, function() { $menu.css('display', ''); });        } else {          $menu.show().slideup(400, function() { $menu.css('display', ''); });        }      });      // hide mobile menu beforeunload      $(window).on('beforeunload unload', function() {        if ($mainmenustate[0].checked) {          $mainmenustate[0].click();        }      });    }  });

.main-nav {    background: #3092c0;    background-image: -webkit-gradient(linear, bottom, top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);    background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);    -webkit-border-radius: 8px;    -moz-border-radius: 8px;    -ms-border-radius: 8px;    -o-border-radius: 8px;    border-radius: 8px;    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);  }    .main-nav:after {    clear: both;    content: "\00a0";    display: block;    height: 0;    font: 0px/0 serif;    overflow: hidden;  }    .nav-brand {    float: left;    margin: 0;  }    .nav-brand {    display: block;    padding: 10px 10px 10px 20px;    color: #fff;    font-family: 'helvetica neue', helvetica, arial, sans-serif;    font-size: 22px;    font-weight: normal;    line-height: 29px;    text-decoration: none;  }    #main-menu {    clear: both;    -webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;  }    @media (min-width: 768px) {    #main-menu {      float: right;      clear: none;    }  }      /* mobile menu top separator */    #main-menu:before {    content: '';    display: block;    height: 1px;    font: 1px/1px sans-serif;    overflow: hidden;    background: #2e8cb8;  }    @media (min-width: 768px) {    #main-menu:before {      display: none;    }  }      /* mobile menu toggle button */    .main-menu-btn {    float: right;    margin: 10px;    position: relative;    display: inline-block;    width: 29px;    height: 29px;    text-indent: 29px;    white-space: nowrap;    overflow: hidden;    cursor: pointer;    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }      /* hamburger icon */    .main-menu-btn-icon,  .main-menu-btn-icon:before,  .main-menu-btn-icon:after {    position: absolute;    top: 50%;    left: 2px;    height: 2px;    width: 24px;    background: #fff;    -webkit-transition: 0.25s;    transition: 0.25s;  }    .main-menu-btn-icon:before {    content: '';    top: -7px;    left: 0;  }    .main-menu-btn-icon:after {    content: '';    top: 7px;    left: 0;  }      /* x icon */    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {    height: 0;    background: transparent;  }    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {    top: 0;    -webkit-transform: rotate(-45deg);    transform: rotate(-45deg);  }    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {    top: 0;    -webkit-transform: rotate(45deg);    transform: rotate(45deg);  }      /* hide menu state checkbox (keep visible screen readers) */    #main-menu-state {    position: absolute;    width: 1px;    height: 1px;    margin: -1px;    border: 0;    padding: 0;    overflow: hidden;    clip: rect(1px, 1px, 1px, 1px);  }      /* hide menu in mobile view */    #main-menu-state:not(:checked) ~ #main-menu {    display: none;  }    #main-menu-state:checked ~ #main-menu {    display: block;  }    @media (min-width: 768px) {    /* hide button in desktop view */    .main-menu-btn {      position: absolute;      top: -99999px;    }    /* show menu in desktop view */    #main-menu-state:not(:checked) ~ #main-menu {      display: block;    }  }      /* ignore: unrelated generic demo styles */    body {    margin: 8px;    background: #fff;    color: #aaa;    font: 16px/1.5em 'helvetica neue', helvetica, arial, sans-serif;  }    .demo-text {    margin: 3em 22px;  }    .demo-text p {    margin-bottom: 1em;  }    .demo-text {    color: #999;  }

<link href="https://vadikom.github.io/smartmenus/src/css/sm-blue/sm-blue.css" rel="stylesheet"/>  <link href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>  <script src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollto.min.js"></script>  <body>  <nav class="main-nav" role="navigation">      <!-- mobile menu toggle button (hamburger/x icon) -->    <input id="main-menu-state" type="checkbox" />    <label class="main-menu-btn" for="main-menu-state">      <span class="main-menu-btn-icon"></span> toggle main menu visibility    </label>      <h2 class="nav-brand"><a href="#">brand</a></h2>      <!-- sample menu definition -->    <ul id="main-menu" class="sm sm-blue">      <li><a href="http://www.smartmenus.org/">home</a></li>      <li><a href="http://www.smartmenus.org/about/">about</a>        <ul>          <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">introduction smartmenus jquery</a></li>          <li><a href="http://www.smartmenus.org/about/themes/">demos + themes</a></li>          <li><a href="http://vadikom.com/about/#vasil-dinkov">the author</a></li>          <li><a href="http://www.smartmenus.org/about/vadikom/">the company</a>            <ul>              <li><a href="http://vadikom.com/about/">about vadikom</a></li>              <li><a href="http://vadikom.com/projects/">projects</a></li>              <li><a href="http://vadikom.com/services/">services</a></li>              <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">privacy policy</a></li>            </ul>          </li>        </ul>      </li>      <li><a href="http://www.smartmenus.org/download/">download</a></li>      <li><a href="http://www.smartmenus.org/support/">support</a>        <ul>          <li><a href="http://www.smartmenus.org/support/premium-support/">premium support</a></li>          <li><a href="http://www.smartmenus.org/support/forums/">forums</a></li>        </ul>      </li>      <li><a href="http://www.smartmenus.org/docs/">docs</a></li>      <li><a href="#">sub test</a>        <ul>          <li><a href="#">dummy item</a></li>          <li><a href="#">dummy item</a></li>          <li><a href="#" class="disabled">disabled menu item</a></li>          <li><a href="#">dummy item</a></li>          <li><a href="#">more...</a>            <ul>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">more...</a>                <ul>                  <li><a href="#">dummy item</a></li>                  <li><a href="#" class="current">a 'current' class item</a></li>                  <li><a href="#">dummy item</a></li>                  <li><a href="#">more...</a>                    <ul>                      <li><a href="#">submenusminwidth</a></li>                      <li><a href="#">10em</a></li>                      <li><a href="#">forced.</a></li>                    </ul>                  </li>                  <li><a href="#">dummy item</a></li>                  <li><a href="#">dummy item</a></li>                </ul>              </li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">a pretty long text test default submenusmaxwidth:20em setting sub menus</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>              <li><a href="#">dummy item</a></li>            </ul>          </li>        </ul>      </li>      <li><a href="http://www.smartmenus.org/contact/">contact</a></li>    </ul>  </nav>    <div class="demo-text">    <p>demonstrates complete navbar including mobile view menu toggle button (<a href="http://www.smartmenus.org/docs/#menu-toggle-button">related docs</a>).</p>  </div>    </body>