jQuery menu fails to toggle the class name

Question

jQuery menu fails to toggle the class name

The toggle functionality in the Menu is not working properly. Upon clicking the toggle button, I encountered the following JavaScript error:

  "message": "Uncaught TypeError: Cannot read property 'toggle' of undefined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 159,
  "colno": 44
}

//java.js
function toggleMenu() {
  document.getElementById('Menu').classlist.toggle('active');
}

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#Menu {
  padding: 0px;
  position: fixed;
  width: 400px;
  height: 100%;
  background: #00ff00;
  left: -400px;
}

#Menu.active {
  display: 0px;
}

#menu ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  top: 40px;
  position: relative;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #00ff00;
  border-top: 4px solid #ff0000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#Menu .toggle-btn {
  position: absolute;
  left: 410px;
  top: 65px;
}

#Menu .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #000;
  margin: 5px 0px;
}

#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#menu ul li:hover {
  background-color: #000;
}

#menu>ul>li {
  border-right: 4px solid #ff0000;
  border-left: 2px solid #000;
}

.bottom {
  border-bottom: 4px solid #ff0000;
}

#menu ul ul {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  border-left: 4px solid #ff0000;
  border-bottom: 4px solid #ff0000;
  border-right: 4px solid #ff0000;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

#menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}

#Menu ul li a {
  text-decoration: none;
}

i {
  margin-left: 15px;
}

#menu>ul>li:nth-of-type(3)::after {
  content: "+";
  position: absolute;
  margin-left: 60%;
  color: #fff;
  font-size: 18px;
}

#menu>ul>li:nth-of-type(2)::after {
  content: "+";
  position: absolute;
  margin-left: 56%;
  color: #fff;
  font-size: 18px;
}

<!doctype html>
<html>

<head>
  <title>vertical menu with css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <script src="java.js"></script>
</head>

<body>
  <div id="Menu">
    <div class="toggle-btn" onclick="toggleMenu()">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li><a href="#"><i class="fas fa-home">Home</i></a></li>
      <li><a href="#"><i class="fas fa-user-tie">Bjorn</i></a>
        <ul>
          <li><a href="#">Child 1 </i></a></li>
          <li><a href="#">Child 2 </i> </a></li>
          <li><a href="#">Child 3 </i></a></li>
        </ul>
        <li><a href="#"><i class="fas fa-user">Cille</i></a>
          <ul>
            <li><a href="#">Child 1 </a></li>
            <li><a href="#">Child 2 </a></li>
            <li><a href="#">Child 3 </a></li>
          </ul>
          <li><a href="#"><i class="fas fa-user-tie">David</i></a></li>
          <li class="bottom"><a href="#"><i class="fas fa-user-tie">Fin</i>/a></li>

      </ul>
    </div>
  </body>

</html>

javascript jquery html css

Answer 1

Answer №1

There were numerous bugs present. I suggest comparing my version with yours to identify the discrepancies.

Be mindful of case sensitivity (e.g. classList and classlist, #Menu and #menu)
Ensure proper closure of HTML tags. Some errors were noted in this area.
Remove unnecessary elements such as </i>. These may be remnants from previous copy-pasting.

Nevertheless, it is recommended to utilize a syntax-highlighting tool like an IDE. Free versions include VS Code, Atom, etc. Familiarize yourself with the syntax by referring to resources like the Mozilla Developer Network, which is a valuable knowledge base maintained by the community.

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#Menu {
  padding: 0px;
  position: fixed;
  width: 400px;
  height: 100%;
  background: #00ff00;
  left: -400px;
  transition: left 360ms ease-in;
}

#Menu.active {
  left: 0;
}

#Menu ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  top: 40px;
  position: relative;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #00ff00;
  border-top: 4px solid #ff0000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#Menu .toggle-btn {
  position: absolute;
  left: 410px;
  top: 65px;
}

#Menu .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #000;
  margin: 5px 0px;
}

#Menu ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#Menu ul li:hover {
  background-color: #000;
}

#Menu>ul>li {
  border-right: 4px solid #ff0000;
  border-left: 2px solid #000;
}

.bottom {
  border-bottom: 4px solid #ff0000;
}

#Menu ul ul {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  border-left: 4px solid #ff0000;
  border-bottom: 4px solid #ff0000;
  border-right: 4px solid #ff0000;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

#Menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}

#Menu ul li a {
  text-decoration: none;
}

i {
  margin-left: 15px;
}

#Menu>ul>li:nth-of-type(3)::after {
  content: "+";
  position: absolute;
  margin-left: 60%;
  color: #fff;
  font-size: 18px;
}

#Menu>ul>li:nth-of-type(2)::after {
  content: "+";
  position: absolute;
  margin-left: 56%;
  color: #fff;
  font-size: 18px;
}

<!doctype html>
<html>

<head>
  <title>vertical menu with css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <script src="java.js"></script>
</head>

<body>
  <div id="Menu">
    <div class="toggle-btn" onclick="toggleMenu()">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li><a href="#"><i class="fas fa-home">Home</i></a></li>
      <li><a href="#"><i class="fas fa-user-tie">John</i></a>
        <ul>
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
          <li><a href="#">Child 3</a></li>
        </ul>
        <li><a href="#"><i class="fas fa-user">Jane</i></a>
          <ul>
            <li><a href="#">Child 1</a></li>
            <li><a href="#">Child 2</a></li>
            <li><a href="#">Child 3</a></li>
          </ul>
          <li><a href="#"><i class="fas fa-user-tie">David</i></a></li>
          <li class="bottom"><a href="#"><i class="fas fa-user-tie">Finch</i></a></li>

          </ul>
        </div>
      </body>

    </html>

Answer 2

There were numerous bugs present. I suggest comparing my version with yours to identify the discrepancies.

Be mindful of case sensitivity (e.g. classList and classlist, #Menu and #menu)
Ensure proper closure of HTML tags. Some errors were noted in this area.
Remove unnecessary elements such as </i>. These may be remnants from previous copy-pasting.

Nevertheless, it is recommended to utilize a syntax-highlighting tool like an IDE. Free versions include VS Code, Atom, etc. Familiarize yourself with the syntax by referring to resources like the Mozilla Developer Network, which is a valuable knowledge base maintained by the community.

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

#Menu {
  padding: 0px;
  position: fixed;
  width: 400px;
  height: 100%;
  background: #00ff00;
  left: -400px;
  transition: left 360ms ease-in;
}

#Menu.active {
  left: 0;
}

#Menu ul li {
  color: rgba(230, 230, 230, 0.9);
  list-style: none;
  padding: 15px 10px;
  top: 40px;
  position: relative;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #00ff00;
  border-top: 4px solid #ff0000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#Menu .toggle-btn {
  position: absolute;
  left: 410px;
  top: 65px;
}

#Menu .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #000;
  margin: 5px 0px;
}

#Menu ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#Menu ul li:hover {
  background-color: #000;
}

#Menu>ul>li {
  border-right: 4px solid #ff0000;
  border-left: 2px solid #000;
}

.bottom {
  border-bottom: 4px solid #ff0000;
}

#Menu ul ul {
  transition: all 0.3s;
  opacity: 0;
  position: absolute;
  border-left: 4px solid #ff0000;
  border-bottom: 4px solid #ff0000;
  border-right: 4px solid #ff0000;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

#Menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}

#Menu ul li a {
  text-decoration: none;
}

i {
  margin-left: 15px;
}

#Menu>ul>li:nth-of-type(3)::after {
  content: "+";
  position: absolute;
  margin-left: 60%;
  color: #fff;
  font-size: 18px;
}

#Menu>ul>li:nth-of-type(2)::after {
  content: "+";
  position: absolute;
  margin-left: 56%;
  color: #fff;
  font-size: 18px;
}

<!doctype html>
<html>

<head>
  <title>vertical menu with css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <script src="java.js"></script>
</head>

<body>
  <div id="Menu">
    <div class="toggle-btn" onclick="toggleMenu()">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <li><a href="#"><i class="fas fa-home">Home</i></a></li>
      <li><a href="#"><i class="fas fa-user-tie">John</i></a>
        <ul>
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
          <li><a href="#">Child 3</a></li>
        </ul>
        <li><a href="#"><i class="fas fa-user">Jane</i></a>
          <ul>
            <li><a href="#">Child 1</a></li>
            <li><a href="#">Child 2</a></li>
            <li><a href="#">Child 3</a></li>
          </ul>
          <li><a href="#"><i class="fas fa-user-tie">David</i></a></li>
          <li class="bottom"><a href="#"><i class="fas fa-user-tie">Finch</i></a></li>

          </ul>
        </div>
      </body>

    </html>

Answer 3

Answer №2

It appears the issue lies in the incorrect usage of classList, which should be camel-cased as shown below:

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}

Additionally, consider naming your file based on its functionality rather than using a name like java.js. This practice will help you better organize and identify features within your codebase.

Answer 4

It appears the issue lies in the incorrect usage of classList, which should be camel-cased as shown below:

function toggleMenu() {
  document.getElementById('Menu').classList.toggle('active');
}

Additionally, consider naming your file based on its functionality rather than using a name like java.js. This practice will help you better organize and identify features within your codebase.

jQuery menu fails to toggle the class name

Answer №1

Answer №2

Similar questions

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

Facing an issue where WordPress AJAX is not showing the expected content

Trouble with displaying days on the Datepicker

Store the checkbox's data in the database for safekeeping

Tips on obtaining the element that was used as the event selector

How can I create two buttons on one line in a Struts2 form?

Modifying the content within a DIV element

Unable to reference the namespace 'ThemeDefinition' as a valid type within Vuetify

Message displayed within Ng-repeat loop

JSON format for date and time conversion

How to output a string in jQuery if it includes a certain character?

Enhance your user interface with a personalized icon on the JQuery date

What is the best way to implement collision detection using raycasting?

Guide on invoking a node.js function from an express-rendered ejs page

Using regular expressions to identify the presence of "&", parentheses, and consecutive letters in a string

React - Error: you have a syntax problem because there is an unexpected token <

What could be causing the Babel installation to fail within Electron? Is Babel necessary for my project or can it be avoided?

The "Product URL" in Woocommerce is overlapping with the "Add to Cart" button

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

javascript is failing to display the appropriate message at the correct moment