Day 5: Mobile Dropdown Menu

Day_5

We went over more of the same but learned some new methods and event handlers.

We learned about GET methods like

.prop()

which manipulates the DOM to get the property value of the first element in the set.

We learned about the

.change()

event handler with an anonymous function that we used to change the function of the dropdown menu. Before we had a Go button but what good is that? You would select the dropdown and the link to say, an FAQ, and then press “Go”. Well what about just going to that page when you touch or click on the dropdown menu link for that page? That is what we did by changing the whole behavior of the dropdown, and eliminating the appended Go button. Here is the code:

$select.change(function() { //Go to select's locaiton window.location = $select.val(); $select.change(function() { //Go to select's locaiton window.location = $select.val(); $select.change(function() { //Go to select's locaiton window.location = $select.val(); }); The .val() gets the select input without passing any arguments. Which is just clicking on a link that we specified in the HTML and the class we referenced in the jQuery that holds that link. jQuery isn’t at all bad. And I have two more things to go to complete that part of the Front End Web Dev Track.

Subscribe to Tiffany R. White Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe