How to use JQuery in Service Portal Widgets?

[User477307]

I am trying to create a simple responsive Nav Bar for Service Portal. I tried a Of-the-Shelf code available on the internet. pasted in my widget but the the JQuery part of it doesn't seem to be working. The entire functionality is broken and not working as expected.

I tried creating dependencies as well with JS include type URL and adding the CDN link in that field.

Can someone please answer this once for all I feel like lot of the FIRE-POWER for UI, which we find on the internet goes unutilized because of ServiceNow not able to work with external Libraries. 

Please let me know how solve this.

Below is the Code:

HTML

<nav>
  <div class="container">
    <ul>
      <li><a href="#">Home</a></li>
      <li> <a href="#">Categories </a>
        <ul>
          <li><a href="#">Category One</a></li>
          <li><a href="#">Category Two</a></li>
          <li><a href="#">Category Three</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.6.1.slim.js"
        integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk="
        crossorigin="anonymous"></script>
<script>
  $('nav li').hover(
    function() {
      $('ul', this).stop().slideDown(200);
    },
    function() {
      $('ul', this).stop().slideUp(200);
    }
  );
</script>

CSS

nav { background: #2ba0db; }

nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 14px;
  transition: 0.3s linear;
}

nav ul li:hover { background: #126d9b; }

nav ul li ul {
  border-bottom: 5px solid #2ba0db;
  display: none;
  position: absolute;
  width: 250px;
}

nav ul li ul li {
  border-top: 1px solid #444;
  display: block;
}
nav ul li ul li:first-child { border-top: none; }
nav ul li ul li a {
  background: #373737;
  display: block;
  padding: 10px 14px;
}
nav ul li ul li a:hover { background: #126d9b; }

CLIENT SCRIPT

//Client Script
api.controller=function() {
	/* widget controller */
	var c = this;
	$(document).ready(function(){
		responsive_menu = $('.navbar_ul');
		$('#menu-acces').on('click', function(e) {
			e.preventDefault();
			responsive_menu.slideToggle();
		});
		$(window).resize(function(){
			var obtener_ancho = $(this).width(); 
			if(obtener_ancho > 480 && responsive_menu.is(':hidden')) {
				responsive_menu.removeAttr('style');
			}
		}); 
		$('nav li').on('click', function(e) {                
			var obtener_ancho = $(window).width();
			if(obtener_ancho < 480 ) {
				responsive_menu.slideToggle(); 
			}
		});
	});
};

Widget Dependencies.

RESULTS:

Reality

Expected:

Would be great if some one can help.

Thanks.

[User477307]

Hi @Mohith Devatte tried man! still doesn't work not sure what's wrong, and by the way "slim" is just compressed version of jQuery and what I had added is the full-fledged uncompressed one. 

[User477307]

I found a workaround with Plain Javascript but still this jQuery thing is open. Let me know if you find anything.

[jaheerhattiwale · Accepted solution]

@User477307 

100% working solution.

Replace HTML with following:

<nav>
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li> <a href="#">Categories </a>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk="
crossorigin="anonymous"></script>
<script>
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);
</script>

Note:

I just changed "https://code.jquery.com/jquery-3.6.1.slim.js" to "https://code.jquery.com/jquery-3.6.1.js"

Result: