Develop Reference

Hide() dropdown contents makes it disappear

I'm new to Javascript so this may be a stupid question, but I'm at a loss. I've been trying to get my dropdown to hide/close when the right list item is selected. I'm using the hover dropdown provided by W3Schools. I've copied the CSS they've provided and my HTML and JS look like this:
<div class="dropdown" id = "menu3">
<button class="dropbtn" id = "menu3btn">Menu 3</button>
<div class="dropdown-content" id = "menu3c">
<ul>
<li><a id="item30">Cheese</a></li>
<li><a id="item31">Pepperoni</a></li>
<li><a id="item32">Sausage</a></li>
</ul>
</div>
</div>
And JS:
$(document).ready(function(){
$('li').click(function(){
if($(this).text() == "Sausage"){
$(this).parent().parent().hide();
}
}
}
The current Javascript is closing the dropdown if the user clicks "Sausage", which is what I want. But when I hover over the menu again, the dropdown doesn't open/show. I've tried changing
$(this).parent().parent().hide();
to
$(this).parent().hide();
and the results are the same.
I've also tried to toggle the dropbtn by replacing the parent().hide() code with:
var btnName = "#"+$(this).parent().parent().parent().attr("id")+"btn";
$(btnName).toggle();
This removed the button and dropdown menu from the screen entirely.
I've also tried forcing the hover to show hidden dropdown-content by adding this method to my JS:
$(".dropdown").hover(function() {
if($(this).attr("id") == "menu3"){
$("#menu3c").show();
}
}
This didn't do anything either (the hidden content stayed hidden).
Any help would be much appreciated.

Instead of $(this).parent().parent().hide();, you can use this to hide the parent
$(this).closest('div').hide();
To show the menu again,
$('#menu3btn').on('click', function() {
$('#menu3c').toggle();
});

How do I tell a submenu to be visible when its parents or containing links are active?

I have a menu in HTML and it looks like this:
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Team</li>
<li>Philosophy</li>
<li>History</li>
</ul>
</li>
<li>Projects</li>
<li>Services
<ul>
<li><a href="#">Our Service</li>
<li>Special Offers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Everything is in shape via CSS except one thing: to get the submenu to appear when its parent list-item's link points to the same address as the current page address.
I know this is possible somehow. But I really am the greatest noob with JavaScript or jQuery or PHP (I think the last two mean the same thing right?).
I tried copying and pasting code pieces like "OnClick=..." and one that was like "" or also one I found that contained "GetElenentbyTagName" (which almost worked...) but besides that I had no real clue about where to put them even. They just didn't work properly or not at all. I had a full done code piece but when I pasted it in and replaced some tag names it all got got marked red and my head is burning after trying to get it to work for the entire day.
I think this is possible because I have seen things that seemed to be describing part of what I want to do. E.g.
The script piece should either
Option A: Tell the browser that if the user is on a page which has the same address as a link in the menu it's href-address is, then it's submenu (ul li ul) or the menu (ul) where itself is contained in, should get "visiblity:visible".
Option B:
The script code says like "if the user clicks on an menu item (ul li), then it's submenu (ul li ul), if it has one, or if the menu-item that is being clicked is one of the submenus, then this submenu should become "visibility:visible". If the item that is clicked doesn't have a submenu, no submenu should be shown.
The HTML code must not have classes or other attributes directly anywhere between (nav) and (/nav) though.

I do not have sure if i understand what you need,
you need when user go to some menu page it get the url and active that link on menu until the user is on that page right?
if is that,
i think something like that should work:
<script type='text/javascript'>
$(function(){
$item = $('ul li a').filter(function(){
return $(this).prop('href').indexOf(location.pathname) != -1;
});
$item.css('visibility','visible'); //or whatever ur using to active it.
});
</script>

You can do this with CSS:
li ul {
display: none;
}
li a:hover + ul {
display: block;
}
http://jsfiddle.net/7bxf6r33/
[Edit]
This works:
http://jsfiddle.net/7bxf6r33/7/

OnePage Scroll custom nav

I built this website http://www.graphink.be where I use the OnepageScroll Plugin.
I came across the weirdest behaviour with the plugin.
I hooked a custom navigation to the scroll effect.
When I click the nav links, following DOWN the sections, the plugin will automatically skip one section at each click.
Meaning : click on the 2nd link, it will move to the 3rd, click on the 3rd and it will move on to the 4th and so on, creating a blank section when clicking on the last link.
The weirdest thing is that it seems to be working fine following UP the links...
here's the small js I created for the custom nav:
$(document).ready(function(){
$("nav > input").click(function(){
$(".content").moveTo($(this).data("target"));
});
// Set up nav bar
// ---------------------------------------------------------------------------
$("#logo").on('click', function(){$(".content").moveTo(1);});
$(".arrow").on('click', function(){
$(".content").moveDown();
});
$("#nav_home").on('click ', function(){$(".content").moveTo(1); });
$("#nav_work").on('click ', function(){$(".content").moveTo(2);});
$("#nav_about").on('click ', function(){ $(".content").moveTo(3); });
$("#nav_contact").on('click ', function(){$(".content").moveTo(4);});
});
I obviously made a mistake somewhere, but I just can't find it...

I would try getting the section index from the element clicked and make sure the index is always correct:
$('nav li a').click(function(e) {
var sectionIndex = $(this).data("target");
console.log(sectionIndex); // print to check
$('.content').moveTo(sectionIndex);
});

It seems to me that the section index starts on 0. As it always does in javascript or jquery. Although it's not very clear in the docs...
$.fn.moveTo(page_index)
This method allows you to move to the specified page index programatically.
Change the data-target attribute to one number less on each.
<ul>
<li> Home</li>
<li> Work</li>
<li> About</li>
<li> Contact</li>
</ul>
If you still having troubles, I would recommend you to try fullPage.js which integrates a menu option and many other useful options and configurations.

I think it has something to do with href attribute of "a"
Try to remove #intro #work #contact and #about from "a" elements of your navigation

Make only bullets clickable

I'm working on a menu that is designed using an unordered list, with each list element containing a link to another page. However, I would also like to be able to click on each bullet point to open more subcategories that will also link to other pages.
Essentially, I would like to be able to click once on a link and have it go to the correct page, but I would also like to click on the bullet point and have it expand into the subcategories. I've been researching how to separate the bullet from the content of the li, but it doesn't seem to be working in my case, likely because my li contains a lot of subcategories. Here's an example:
<li id="m2l1" class="child">
Y
<ul id="u11">
<li class="gchild">Y.1</li>
<li class="gchild">Y.2</li>
<li class="gchild">Y.3</li>
<li class="gchild">Y.4</li>
<li class="gchild">Y.5</li>
<li class="gchild">Y.6</li>
<li class="gchild">Y.7</li>
<li class="gchild">Y.8</li>
<li class="gchild">Y.9</li>
</ul>
</li>
Does anyone have any suggestions as to how to separate the bullet from the text in my case?
Here's the link: http://jsfiddle.net/stamblerre/XYp48/17/
Thank you!!!

Your HTML is invalid. You can't have div inside your ul. Moreover, you can greatly simplify your code by moving separate logic for each li into one generic handler.
Something like this:
Demo: http://jsfiddle.net/abhitalks/XYp48/18/
CSS:
ul {
display: none;
overflow: hidden;
}
ul:first-child {
display: block;
}
JS:
$("li").on("click", function () {
$(this).children("ul").slideToggle();
return false;
});
Edit:
I deliberately left out checking of a because clicking the a would navigate to the respective pages (as mentioned in your question), so expand/collapse wouldn't matter.
However, as per your comment if you really want to remove a altogether from the handler, then you can use the event target to handle li without a. Something like this:
Demo 2: http://jsfiddle.net/abhitalks/XYp48/22/
JS:
$("li").on("click", function (e) {
var $t = $(e.target); // get the event target as a jQuery object
if (!$t.is('a')) { // check if the target is not an anchor
$(this).children("ul").slideToggle();
return false;
}
// otherwise if target is anchor, then do nothing
});

Change your list still to hide bullets, then modify your html to :
<li class="gchild">•Y.1</li>
Should do the trick.

<li class="gchild">Y.1</li>

One way that worked for me: remove the bullet with li { list-style-type: none; } then add your own bullets with the character • (alt-8 on a mac). Add that character inside a elements like so:
• X
with the label now outside of the element.
Hope this works for you!

drop down content on a particular list

need help on this please
need this when click it slides down the content and when clicked again it slides up
<li>...</li>
<li>...</li>
<li id="with-content">Click here
<div class="content">Some div here Some div here Some div here</div>
</li>
only that particular list and not all list need to show content or hide with the slide effect
how can I do this with jquery? please any help would do, just a simple slidedown + slideup effect

This should be trivial to figure out with a search, and a little effort goes a long way, but I'll answer anyway:
$('#with-content a').on('click', function(e) {
e.preventDefault();
$(this).closest('li').find('.content').slideToggle(600);
});
ID's are unique, and it probably needs to be wrapped in document.ready and jQuery must be included on the site ?

$('#with-content a').on('click', function(e) {
e.preventDefault();
$('#with-content').toggle();
});