Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Having a nightmare ...
I have a list of social icons three social account, Twitter, Facebook, Pinterest.
However, as I have three twitter accounts I want it that when you click on the twitter icon you then see a sub menu of uls containing three li's for my other Twitter accounts.
<div class="socials">
<ul>
<li id="tweeter">
<a href=""><i class="icon icon-twitter">Twitter</i>
<ul class="subicons">
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</a>
</li>
<li><i class="icon icon-linkedin">Facebook</i></li>
<li><i class="icon icon-linkedin">Pinterest</i></li>
</ul>
</div>
CSS to pistion the list of three Twitter Accounts above
.socials ul li ul.subicons {
position:absolute;
top:-55px;
padding:0;
margin:0;
width:152px;
left:50%;
margin-left:-57px;
text-align:center;
}
.socials ul li ul.subicons li {display:block; margin:0 5px; width:40px; height:40px; text-indent:-9999px;}
.socials ul li ul.subicons li a.twitter-one {
background:red;
width:40px;
height:40px;
display:block;
}
.socials ul li ul.subicons li a.twitter-two {
background:blue;
width:40px;
height:40px;
display:block;
}
.socials ul li ul.subicons li a.twitter-three {
background:yellow;
width:40px;
height:40px;
display:block;
}
Based on the answer on that other thread Danko pointed to, your jQuery would have to look something like this:
Show/hide on click:
Option 1:
$('#tweeter').on('click', function(e){
e.preventDefault();
$(this).css( "display", $(this).css("display") === "none" ? "block" : "none" );
});
Option 2:
$(document).ready(function () {
$("#tweeter", this).on("click", function(e) {
e.preventDefault();
$(this).find(".subicons").toggle();
});
});
Show on click, hide on blur:
$(document).ready(function () {
$(".icon-twitter-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
$(".icon-twitter-2").on({
"click": function (e) {
e.preventDefault();
$(this).siblings(".subicons").show();
},
"blur": function () {
$(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
}
});
});
Explanation:
The blur event handler uses an animation to delay the hide() command, so that users can click on any of the shown Twitter links (which will trigger the blur event) before they are hidden.
Demo:
Notice: I changed your original html a bit.
$(document).ready(function () {
$(".icon-twitter-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
$(".icon-twitter-2").on({
"click": function (e) {
e.preventDefault();
$(this).siblings(".subicons").show();
},
"blur": function () {
$(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
}
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
/*, div.blur:blur p.twitter */
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<a id="tweeter" href="" class="icon icon-twitter icon-twitter-1"><i>Twitter</i></a>
<ul class="subicons">
<li>Twitter 1</li>
<li>Twitter 2</li>
<li>Twittee 3</li>
</ul>
</li>
</ul>
</div>
<p style="margin-top:30px"><strong>Show on click, hide on blur:</strong></p>
<div class="socials click">
<ul>
<li>
<a id="tweeter" href="" class="icon icon-twitter icon-twitter-2"><i >Twitter</i></a>
<ul class="subicons">
<li>Twitter 1</li>
<li>Twitter 2</li>
<li>Twittee 3</li>
</ul>
</li>
</ul>
</div>
Related
I'm trying to understand the logic happening in my basic multilevel menu click event. I understood what happening on clicking on "About" menu in the navigation. And it works as per my expecation of code. But when i click on "Profile" menu (Submenu of "About" menu), JS makes it's sublevel menu "display:none". I tried to think in the aspect of even bubbling. But eventhough the bubbling happens here, it should not be working like this. Actually for me, its really complicated to understand how JS works here. It would be a Great Help if anyone can explain with a simple and understandable way. Thank You Very Much in Advance!!!
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
}
else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
.main-navigation ul li {padding:.35rem;background:#f9f9f9;}
.main-navigation ul li ul {padding-left:1rem;display:none;}
.main-navigation ul li a {display:block;text-decoration:none;}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Solution
If you add a console.log inside your click handler you will notice that the event for the nested item is called twice.
You probably knew that it could happen and you used preventDefault.
However, preventDefault is for the browser's default effects (for example, it prevents your page to refresh as you put an href attribute) but in your case the double behaviour is from your own custom listener.
This means, you need to add stopPropagation that prevents further propagation of the current event in the capturing and bubbling phases.
Working Demo
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
} else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
font-family: arial;
}
.main-navigation ul li {
padding: .35rem;
background: #f9f9f9;
}
.main-navigation ul li ul {
padding-left: 1rem;
display: none;
}
.main-navigation ul li a {
display: block;
text-decoration: none;
}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I'm trying to figure out how I can use bind to move the selected li's from box1 to box2 and from box2 back to box1. Stuck on this and need some help. Also when a li is selected and moved over to the next box by clicking Move Right, they stack on every click. How can I fix that?
code:
$(document).ready(function(){
$(".box1 ul li").click(function(){
if($(this).hasClass("active-li")==true)
{
$(this).removeClass("active-li");
}
else
{
$(this).addClass("active-li");
}
});
$(".box1 ul li").click(function(){
var x=$(this).data("drink");
$("#btt1").click(function(){
$(".box2 ul").append(x);
$(x).bind("click", bindLi);
});
});
$(x).bind("click", bindLi);
});
function bindLi(){
alert("hello");
}
CSS:
.box1{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:50px;}
.box2{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:100px;}
.button-container{width:80px; height:30px; float:left; margin-top:200px; margin-left:100px;}
.active-li{background-color:yellow;}
ul li:hover{cursor:pointer;}
HTML:
<div class="box1" id="box1">
<ul>
<li data-drink="beer">
Beer
</li>
<li data-drink="water">
Water
</li>
<li data-drink="soda">
Soda
</li>
<li data-drink="juice">
Juice
</li>
</ul>
</div>
<div class="button-container">
<input type="button" id="btt1" name="btt1" value="Move Right" />
<input type="button" id="btt2" name="btt2" value="Move Left" />
</div>
<div class="box2" id="box2">
<ul></ul>
</div>
JSFiddle:
https://jsfiddle.net/fgo455zt/
Please take a look at below code:
https://jsfiddle.net/fgo455zt/5/
We can simply the code as follows:
$(document).ready(function() {
$(".box1 ul li, .box2 ul li").click(function() {
$(this).toggleClass("active-li"); //highlight the clicked li
});
$("#btt1, #btt2").click(function() {
var sourceUL = null;
var targetUL = null;
//depending upon which button clicked we are moving selected li to and from source to target UL
if ($(this).attr("id") == "btt1") {
sourceUL = $(".box1 ul");
targetUL = $(".box2 ul");
} else {
sourceUL = $(".box2 ul");
targetUL = $(".box1 ul");
}
$(sourceUL).find("li.active-li").each(function() {
$(this).removeClass("active-li"); //removing the active class before moving the li
$(targetUL).append($(this));
});
});
});
I am building a small drop-down container which appears when You hover on top of a menu item. When I hover on top of the menu item (e.g. Tools) the dropdown appears, I can move my mouse inside, but when the cursor leaves the dropdown menu, it does not go away. How am I able to achieve this?
I only managed to make it dissapear when you click somewhere outside of it.
Here is a Fiddle.
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
SOLUTION by anima_incognita:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$(".nav-dropdown").on('mouseleave',function(){
dropdown.slideUp();
});
e.stopPropagation();
});
here is edit in your code worked fine with me...added methods
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').mouseenter(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$('#dropdownToggle').mouseleave(function(e) {
dropdown.slideUp();
});
e.stopPropagation();
});
Add this to end of your code:
$(".nav-dropdown").on('mouseleave',function(){
dropdown.hide();
});
Update your JS:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
$(".nav-dropdown").on('mouseleave', function() {
dropdown.slideUp('fast');
});
.nav-list {
.nav-list-item {
float: left;
list-style: none;
padding: 2rem;
background: tomato;
font-family: 'Helvetica', 'Arial', sans-serif;
a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.nav-dropdown {
position: absolute;
background: turquoise;
padding: 2rem;
li {
margin-bottom: 2rem;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-list">
<li class="nav-list-item">
Services
</li>
<li class="nav-list-item dropdown-wrapper">
<a href="#" id="dropdownToggle" class="nav-link tools">Tools
</a>
<!-- dropdown -->
<ul class="nav-dropdown active" style="display: block;">
<li class="nav-dropdown-item">
Buyer Cost Sheet
</li>
<li class="nav-dropdown-item">
Seller Net Sheet
</li>
<li class="nav-dropdown-item">
Mortage Calculator
</li>
<li class="nav-dropdown-item">
Title Fees
</li>
<li class="nav-dropdown-item">
Refi Calculator
</li>
<li class="nav-dropdown-item">
Real Estate Forms
</li>
</ul>
</li>
<li class="nav-list-item">
Buyers & Sellers
</li>
</ul>
As you are using the hover function, the hover function specifies two function to trigger mouseenter and mouseleave event
You have defined only the mouseenter function and not defined the mouseleave function. So below is the updated JS code:
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
e.stopPropagation();
}, function(e){
e.preventDefault();
dropdown.slideUp();;
dropdown.removeClass('active');
});
Whhenever I hover over the menu it works fine. But, when I try to get to the submenu links and children, the menu closes
/*----------------------------------------------------
/* Dropdown menu
/* ------------------------------------------------- */
jQuery(document).ready(function($) {
function mtsDropdownMenu() {
var wWidth = $(window).width();
if (wWidth > 865) {
$('#navigation ul.sub-menu, #navigation ul.children').hide();
var timer;
var delay = 100;
$('#navigation li').hover(
function() {
var $this = $(this);
timer = setTimeout(function() {
$this.children('ul.sub-menu, ul.children').slideDown('fast');
}, delay);
},
function() {
$(this).children('ul.sub-menu, ul.children').hide();
clearTimeout(timer);
}
);
} else {
$('#navigation li').unbind('hover');
$('#navigation li.active > ul.sub-menu, #navigation li.active > ul.children').show();
}
}
mtsDropdownMenu();
$(window).resize(function() {
mtsDropdownMenu();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-513" class="menu-item "><i class="fa fa-calculator"></i> OFFERTE AANVRAGEN
<ul class="sub-menu">
<li id="menu-item-1146" class="menu-item">Zonnepanelen installatie (België)
</li>
<li id="menu-item-1144" class="menu-item">Zonnepanelen reinigen (België)
</li>
<li id="menu-item-1145" class="menu-item">Zonnepanelen installatie (Nederland)
</li>
</ul>
</li>
The code you posted works just fine; here's a plnkr to prove it: https://plnkr.co/edit/IFaueUhKE3J1K9vY1NkQ?p=preview
(simply wrapped a <div id='navigation'><ul> round the top li).
If you still loose the hover over the child-elements, it's caused by something you're not showing in the original question. E.g. adding this css:
li.menu-item {
position: relative;
top: 50px;
left: 300px;
}
would make it difficult to reach the child items because you, briefly, lose the parent-hover while moving to the child.
I have the following code. As soon as I move away the cursor the background color back to white right now. How can I select the li element when the user clicks?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>
Since you already use jQuery, why not just using the click function.
For selecting only one item:
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
jsFiddle
For selecting multiple items:
$('.nav li').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
jsFiddle
In your CSS, override the background-color as follows. It's actually set on the <a> tag, not the <li> in Bootstrap.
.nav>li.active>a {
background-color: #ccc;
}
Use it like this:
<style type="text/css">
.nav li.active {
background-color:grey;
}
</style>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>
and jQuery like this:
<script type="text/javascript">
$(document).ready(function() {
$("#sidebar li").click(function(){
$("#sidebar li").removeClass('active');
$(this).addClass('active') ;
});
});
</script>
You can do like this, where you add a label and an input to your li, and no script is needed.
Update fiddle
HTML
<label><input type="radio" class="hideme" name="li">
<a class="list-group-item">
<i class="icon-home icon-1x"></i>Work Order Jobs
</a>
</label>
CSS
label {
display: inline-block;
width: 100%;
}
.hideme {
display: none;
}
.hideme:checked + .list-group-item{
background-color: gray
}
You can add an active class to your links.
HTML
<a class="list-group-item active>Work Order</a>
CSS
.list-group-item.active {
background-color: gray
}
To change background-color on click, you have to use jQuery.
$( document ).ready(function() {
$(".nav li a").click(function(){
$('li a.active').removeClass('active');
$(this).addClass('active') ;
});
});
Updated JSFiddle
put your li tag in another a tag then use any of these pseudo-classes
w3schools pseudo classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;