Develop Reference

Auto collapse sidebar menu list when lost focus

I just want to ask :
how to make the dropdown-menu collpase when the dropdown menu is active?
When the mouse hovers to the sidebar, the active dropdown menu expanded again?
i think i just wondering using hover but it doesnt work when i try it, so i hope someone can help me to solve this?
Simple Concept I Just want :
Mouse:hover to sidebar-icon/burger is clicked => sidebar-expanded => menu list that have:submenu clicked => dropdown-menu displayed => mouseOut from sidebar => icon is-collapsed
Mouse:hover to sidebar-icon again / sidebar:state(active) => dropdown menu is already expanded
well i dont know that you can understand my question or something.. but i hope u can make this auto collapse menu
$(document).ready(function() {
// Sidebar links
$('.sidebar .side-list li a').on('click', function() {
const $this = $(this);
if ($this.parent().hasClass('buka')) {
$this
.parent()
.children('.dropdown-menu')
.slideUp(200, () => {
$this.parent().removeClass('buka');
});
} else {
$this
.parent()
.parent()
.children('li.buka')
.children('.dropdown-menu')
.slideUp(200);
$this
.parent()
.parent()
.children('li.buka')
.children('a')
.removeClass('buka');
$this
.parent()
.parent()
.children('li.buka')
.removeClass('buka');
$this
.parent()
.children('.dropdown-menu')
.slideDown(200, () => {
$this.parent().addClass('buka');
});
}
});
// ٍSidebar Toggle
$('.burger').on('click', e => {
$('.konten').toggleClass('k-kebuka');
$('.sidebar').toggleClass('s-kebuka');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
<div class="sidebar-dalem">
<div class="side-konten">
<ul class="side-list">
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">ICON</span>
<span class="side-judul">MENU</span>
<span class="panah">[>]</span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #2</span>
<span class="panah">[>] ></span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item">
<a class="side-link" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="konten" class="konten">
<div class="konten-navbar sticky-top">
<ul class="navbar-kiri">
<li>
<a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
</li>
<li>
SEARCH ICO
</li>
</ul>
</div>
</div>

In pure CSS, .menu:hover definitely works, but you have to build the entire menu inside of the element that has the :hover pseudo class and also either touching or overlapping:
.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}
ul {
position: absolute;
top: 36px;
left: 8px;
background: #eee;
border: 1px solid black;
display: none;
margin: 0;
width: 14em;
min-height: 8em;
padding: 0.5em;
list-style: none;
}
.popup:hover ul {
display: block;
}
<div>
<div class="popup"><button>Menu</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Certainly, you'd need to style everything properly.
I also seem to remember that JQuery has OnMouseEnter and OnMouseLeave events that work kind of like :hover too.

Click outside div and icon, div hide

HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Jquery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
I want when click outside .menu-drop and .menu-icon then .menu-drop div hide
when clicking menu-drop div it will stay not hide.

Use mouseup with document like below.
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

On document click, you can check whether the clicked element has the specific class or not, if it does not have the class slideUp() the menu. You also have to prevent the event propagation on clicking the menu.
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Use a single event listener on the body. Query the event target and show and hid the menu as required.
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Here some modification
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

JQuery click event not working on li tag [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I want to get the click event on the li element using jQuery. But unable to get it. FoundationJs framework is used for the frontend.
HTML code:
<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
<div class="row container" style="padding: 5px;">
<h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
<div class="select-box">
<ol class="select" id="coins">
<% for(var i=0; i < data.coinOptions.length; i++) { %>
<li class="ui-state-default <%= i == 0 ? 'ui-selected' : '' %>" data-value="<%- data.coinOptions[i] %>"><%= (data.coinOptions[i] == 0 ? "FREE" : data.coinOptions[i] + " Coins") %></li>
<% } %>
</ol>
</div>
</div>
</div>
The jquery code snippet below works on clicking the container but not on li tag
$(".entry-fee .container").click(function (event) {
event.preventDefault();
console.log(event.currentTarget);
})
None of the below work when I click on the li tags
$(".entry-fee .container .select-box").click(function (event) {
event.preventDefault();
console.log(event.currentTarget);
})
$(".entry-fee .container .select-box li").click(function (event) {
event.preventDefault();
console.log(event.currentTarget);
})
$("#coins li").click(function (event) {
event.preventDefault();
console.log(event.currentTarget);
})
But I noted one thing that if I fire the event manually using
$(".entry-fee .container .select-box li").click()
in chrome console it works, which means the event listeners are bound to the elements.
What can be done here to make it work properly? Let me know if any more info is required.

This is not reproducable with the above example (probably) because the li elements are added dynamically.
You should bind the click handler to the closest parent container where you add the <li> tags in.
For example:
$('#coins-select').on('click','li', function(event){
event.preventDefault();
console.log(event.currentTarget);
});

Try using on in JQuery, when you want to trigger events on elements which are dynamically inserted in DOM
$(document).ready(function() {
$(".select").on("click", "li", function() {
console.log($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
<div class="row container" style="padding: 5px;">
<h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
<div class="select-box">
<ol class="select" id="coins" style="z-index:-1;">
<li class="ui-state-default ui-selected" data-value="100">100 Coins</li>
<li class="ui-state-default" data-value="200">200 Coins</li>
<li class="ui-state-default" data-value="300">300 Coins</li>
<li class="ui-state-default" data-value="400">400 Coins</li>
<li class="ui-state-default" data-value="500">500 Coins</li>
</ol>
</div>
</div>
</div>
Here's a FIDDLE

**use $(document).on **
$(document).on('click', ".entry-fee .container .select-box li", function (event) {
event.preventDefault();
alert(event.currentTarget.innerHTML)
console.log(event.currentTarget);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
<div class="row container" style="padding: 5px;">
<h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
<div class="select-box">
<ol class="select" id="coins" style="z-index:-1;">
<li class="ui-state-default ui-selected" data-value="100">100 Coins</li>
<li class="ui-state-default" data-value="200">200 Coins</li>
<li class="ui-state-default" data-value="300">300 Coins</li>
<li class="ui-state-default" data-value="400">400 Coins</li>
<li class="ui-state-default" data-value="500">500 Coins</li>
</ol>
</div>
</div>
</div>

remove what was appended and add other things on click

I have a list of Li's that wen clicked on will have a class of plSel, When clicked, I want them to have a different video playing and the other videos, clear off
This is how I have it down on my html:
<div class="fullscreen-bg">
<video id="appendVid" loop muted autoplay poster="assets/one.png" class="fullscreen-bg__video">
</video>
</div>
and later the lis appear like this:
<li id="numb01"></li>
<li id="numb02"></li>
<li id="numb03"></li>
<li id="numb04" class="plSel"></li> //whenclicked
and this is how I've laid out my JS so far, the problem is when it gets to be more than one, it just wont work
$(document).ready(function(){
if ($('#numb01').hasClass('plSel')) {
$('#appendVid').append('<source src="assets/one.mp4" type="video/mp4"><source src="assets/one.ogv" type="video/ogg">');
});
how do i continue it on to remove what was appended and append the next one for each li each video would have something like this appended <source src="assets/two.mp4" type="video/mp4"><source src="assets/two.ogv" type="video/ogg">
thanks for your help

It's hard to pair them as you need grammar there. I mean class one with numb01. It could be better if you keep those naming convention better. In case you still them unmodified, at least you should collect them within a scope. Just like li has always ul as their parent.
If both video and list have their position in correct order, here I use jQuery index to find its position, then show it and collect its siblings element then hide them. Then find which video to show by found index, hide its siblings, that's all.
I also showing here on how easier you'll get it if you can store related selector with better naming convention. Example here using data- attribute on button to relate target li visibility.
$(function () {
var index = $('.numb .plSel').index()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
$(document).on('click', '[data-toggle]', function () {
var targetId = $(this).data('toggle')
targetId = $(targetId)
var index = targetId.index()
targetId.show().siblings().hide()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
.numb {
margin-top: 20px;
}
.numb > li:not(.plSel) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullscreen">
<div class="fullscreen-bg one">
One
</div>
<div class="fullscreen-bg two">
Two
</div>
<div class="fullscreen-bg one">
Three
</div>
</div>
<ul class="numb">
<li id="numb01" class="plSel">Numb 1</li>
<li id="numb02">Numb 2</li>
<li id="numb03">Numb 3</li>
</ul>
<button type="button" data-toggle="#numb01">Toggle One</button>
<button type="button" data-toggle="#numb02">Toggle Two</button>
<button type="button" data-toggle="#numb03">Toggle Three</button>

I've adjusted your HTML, but I think this is what you want. FIDDLE
$(document).on("click", ".menu ul li a", function() {
$(".container > div").eq($(this).parent().attr("id")-1).addClass("plSel");
$(".container > div").not(".plSel").css("display", "none");
})
.menu {
float: left;
margin-bottom: 25px;
}
.container {
float: left;
clear: left;
}
.fullscreen-bg {
float: left;
}
li {
list-style: none;
float: left;
min-width: 50px;
text-align: center;
}
li a {
text-decoration: none;
color: darkblue;
}
li a:hover {
color: red;
}
.fullscreen-bg:not(:last-child) {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
<li id="4">Four</li>
<li id="5">Five</li>
<li id="6">Six</li>
</ul>
</div>
<div class="container">
<div class="fullscreen-bg one">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg two">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg three">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg four">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg five">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg six">
<img src="http://placehold.it/100x150" />
</div>
</div>

How Would i change the content of a webpage with the Onclick Function using a function

function changecontent(description){
console.log(description);
document.getElementById('content').innerHTML = description;
}
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
I'm planning to make multiple layouts for the page and based on which item is clicked the content should be changed accordingly. The problem is that I don't know how to make the java function change the content differently based on which item is clicked...

can you make something like this:
<li onClick="changecontent('Math');">Math</li>
this should work..

So, if I understand you correctly, you have several descriptive texts for each of your subjects that you want to dynamically insert into #content. You could just store your texts in variables:
var mathDesc = "Math is awesome and <b>not scary at all!</b>";
You could then insert it to #content like this:
<li onClick="changecontent(mathDesc);">Math</li>
Personally I would use a different approach: Having multiple content-divs and hiding all but one at each time.
One way to hide content is to programmatically assign a className, e.g. hidden and to assign display:none as CSS rule to that class.
Below is an example snippet. I identified the content based on the list-item-id, which I think is what you wish to do.
function changeContent(id) {
var content = document.getElementsByClassName("content");
for (var i = 0; i < content.length; i++) {
if (content[i].id === id + "Content") {
content[i].classList.remove("hidden");
} else {
content[i].classList.add("hidden");
}
}
}
document.getElementById("chooseSubject").onclick = function(e) {
changeContent(e.target.id);
}
#chooseSubject {
list-style-type: none;
}
#chooseSubject li {
cursor: pointer;
}
#chooseSubject li:hover {
background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
background-color: rgb(167, 114, 169);
}
.hidden {
display: none;
}
<ul id="chooseSubject">
<li id="Math">Math</li>
<li id="Science">Science</li>
<li id="Geography">Geography</li>
<li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
You learn about things that have no function in Arts.
</div>

you have to pass description param to the method like this way
<li onClick="changecontent("Math");">Math</li>

Here is how I did it, sorry my question was vague im quite new at this kind of thing....
<script>
function changecontent(clicked_id){
alert(clicked_id);
}
</script>
<!doctype html>
<html>
<head>
<style>
}
.editingfunction{
background-color: ;
text-decoration-color: white;
border :none;
opacity: 0.4;
width: 100px;
}
.col:active {
background-color: rgb(167,114,169);
cursor:pointer;
text-decoration-color:red;
}
.col:visited
{
text-decoration-color:red;
}
body {
background: ;
font-family: ;
text-decoration-color: white;
}
</style>
</head>
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Click Subject</li>
<li class="col" id="Math" onClick="changecontent(this.id);">Math</li>
<li class="col" id="Science" onClick="changecontent(this.id);">Science</li>
<li class="col" id="Geography" onClick="changecontent(this.id);">Geography</li>
<li class="col" id="Arts" onClick="changecontent(this.id);">Arts</li>
<li class="col" id="Buisness" onClick="changecontent(this.id);">Buisness</li>
<li class="col" id="Health" onClick="changecontent(this.id);">Health</li>
<li class="col" id="Social_Science" onClick="changecontent(this.id);">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
<!-- begin snippet: js hide:false -->