Here is my HTML code.
<dl id="sample" class="dropdown">
<dt></dt>
<dd>
<ul>
<li>News</li>
<li>Jobs</li>
<li>Community</li>
<li>Events</li>
<li>Advisory</li>
<li>People</li>
<li>Universities</li>
<li>HR Intellegence</li>
<li>Companies</li>
<li>Inbox</li>
<li>Notifications</li>
</ul>
</dd>
And this is js
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
This is a code for a drop down list that populates on click. I want to repeat it 100 times on my webpage and I don't want to copy the code and change the Class Name or ID for each entry. I remember there is some '.this' type function to do this but I don't know how to use it. Also I have some dynamic posts which contain this list so its JS can't be repeated on every single new entry.
Please suggest such changes in this code which will allow me to use '.dropdown' class with every entry without repeating the JS code and it opens only that drop down which is clicked to open.
I made something for you:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: sans-serif;
}
.dropdown {
display: inline-block;
}
.dropdown dd {
display: none;
box-shadow: 0px 0px 2px 0px #555;
width: 180px;
position: absolute;
margin-left: 1px;
margin-top: 1px;
background-color: #FFF;
}
.dropdown ul {
list-style: none;
padding-left: 0px;
}
dt a {
display: inline-block;
background-color: #1b8be0;
padding: 10px;
color: #FFF;
text-decoration: none;
}
.dropdown li a{
text-decoration: none;
color: #333;
}
.dropdown li {
padding: 6px;
cursor: pointer;
}
.dropdown li:hover{
background-color: #EEE;
padding: 6px;
}
</style>
</head>
<body>
<dl id="sample" class="dropdown">
<dt>Menu</dt>
<dd>
<ul>
<li>News</li>
<li>Jobs</li>
<li>Community</li>
</ul>
</dd>
</dl>
<dl id="sample-2" class="dropdown">
<dt>Menu 2</dt>
<dd>
<ul>
<li>More News</li>
<li>More Jobs</li>
<li>More Community</li>
</ul>
</dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".dropdown dt a").click(function(e){
$(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
if ($(e.target).not(".dropdown ul")){
$(".dropdown dd").fadeOut();
}
});
</script>
</body>
</html>
Its better for you to use a front-end framework like Twitter Bootstrap or Zurb Foundation.
Related
Problem description:
In my menu when .mouseenter() the menu opens and when .mouseleave() it closes, but if i click a lot , the .mouseleave() event is executed.
This only happened on chrome browser.
I have other .click() events inside my menu, but every click I made, the .mouseleave() event is execute.
$(document).ready(function() {
$("#nav1 li").hover(
function() {
$(this).find('ul').slideDown();
},
function() {
$(this).find('ul').slideUp();
});
});
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
padding: 16px 18px;
display: block;
border-bottom: 2px solid #212121;
}
#nav1 li ul li a {
padding: 10px 0;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul id="nav1">
<li>Hover here and infinite click
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Try click "Hover here and infinite click" to see this problem.
EDIT:
As you guys said, the problem occurs in this example.
Here is a video: Video link
When you click many times the browser has lost the element reference, try this example:
<div id="container">
<ul id="nav1">
<li>Menu Heading 1
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 3
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Css
ul,
li,
a {
padding: 0px;
margin: 0px;
}
.show {
display: block !important;
}
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
background-color: #343434;
padding: 16px 18px;
text-decoration: none;
display: block;
border-bottom: 2px solid #212121;
background: linear-gradient(top, #343434, #111111);
}
#nav1 li ul li a {
padding: 10px 0;
padding-left: 30px;
text-decoration: none;
display: block;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
JS
$(document).ready(function() {
$("#nav1 li").hover(
function(e) {
let ulMenu = $(this).find('ul');
ulMenu.addClass('show');
//$(this).find('ul').slideDown();
},
function(e) {
if(e.relatedTarget){
let ulMenu = $(this).find('ul');
ulMenu.removeClass('show');
} else {
console.log('fail ');
}
//$(this).find('ul').slideUp();
});
});
Codepen Example Works
You can add a stropPropagation in your click event.
$("#nav1 li").click(
function(e){
e.stopPropagation();
});
maybe the event is getting lost in the process, try to verify it, and if so set the actual element.
see this: https://api.jquery.com/event.relatedTarget/
I have jquery UI 1.7 and jquery 1.3.2 version. I want to have a combobox with multiple check list in it as shown in picture. Can someone please provide me some simple solution using pure HTML and javscript or JQuery. For the below one, I do not know how to use it
But I do not want any complex code or imports of libraries, preferably in simple javascript or jQuery e.g. jQuery("abcd").multipselect. Please also tell me how and where to put the files etc
Thank you
Aiden
i think this will meet what you want
<html>
<head></head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<style>
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #d3d3d3;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 25px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #bdbdbd;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
</style>
<body>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hide">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="All" />Select All</li>
<li>
<input type="checkbox" value="January" />January</li>
<li>
<input type="checkbox" value="February" />February</li>
<li>
<input type="checkbox" value="March" />March</li>
<li>
<input type="checkbox" value="April" />April</li>
<li>
<input type="checkbox" value="May" />May</li>
<li>
<input type="checkbox" value="June" />June</li>
<li>
<input type="checkbox" value="July" />July</li>
<li>
<input type="checkbox" value="August" />August</li>
<li>
<input type="checkbox" value="September" />September</li>
<li>
<input type="checkbox" value="October" />October</li>
<li>
<input type="checkbox" value="November" />November</li>
<li>
<input type="checkbox" value="December" />December</li>
</ul>
</div>
</dd>
</dl>
<script>
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
function appendToMultiSelect(title){
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.append(",") ;
}
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
}
$('.mutliSelect input[type="checkbox"]').change(function(){
if($(this).val() != "All")
{
var title = $(this).val() ;
if ($(this).is(':checked')) {
appendToMultiSelect(title);
$(".hide").hide();
} else {
$(".mutliSelect").find('li input[value=All]').prop('checked', false);
$('span[title="' + title + '"]').remove();
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.html(lastItem.html().replace(',','')) ;
}
else{
$(".hide").show();
}
var ret = $(".hide");
$('.dropdown dt a').append(ret);
}
}
else
{
//clear selected items
$('.multiSel').html('');
if ($(this).is(':checked')) {
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', true);
title = option.val() ;
appendToMultiSelect(title);
});
$(".hide").hide();
}
else{
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', false);
});
$(".hide").show();
}
}
});
</script>
</body>
</html>
It seems my apparent attempts at mastering the jQuery language have failed me.
I am attempting to try and get the DIV id of the UL LI select box but my alert box comes back "undefined", thus I am looking for expert help.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
.text($(this).html() this line messes with the DOM, and cause problems with traversal. I advice you uses other ways to accomplish the text change. Like
$(this).closest("div").contents().first().replaceWith($(this).text());
$(".select ul li").click(function(e) {
$(this).closest("div").contents().first().replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
Ok, what I'm 99% sure is happening is due to you detaching the element. Your setting the text() of the div.select, which is the parent of your select. That is effectively removing the li element you clicked as a child. So later when you try to do a closest it will not return anything as it's no longer a child. You will most likely need to store that information before you change the text so you have the value without having to look it up afterwards.
$(".select ul li").click(function(e) {
var $parent = $(this).closest('div.select');
$parent.text($(this).html());
alert($parent.attr('id'));
});
I would like to attempt to add functionality to my UL LI list, such that when an LI item is clicked on, the div's text will change to the selected value of the LI click, however, nothing seems to happen.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
Since the target div is at the parent level of the clicked li, you can use .closest() to target the required div element.
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
});
Example : http://jsfiddle.net/DinoMyte/bvtngh57/150/
Try like this
$(".select ul li").on("click", function() {
$(this).closest("div").contents().first().replaceWith($(this).text());
})
DEMO
$(".select ul li").click(function(e) {
$(this).parents('.select').html($(this).html())
});
Please try this instead of
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
This might help you
Use closest() function to get the parent .select, then use filter() function and condition this.nodeType == 3 to select only the text, inside the div. Replace it with value, using following.
$(".select").click(function() {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('.select').contents().filter(function(){
return this.nodeType == 3;
})[0].textContent = $(this).html()
});
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170, 170, 170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br>
<br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br>
<br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
Change
$(this).find('.select').val($(this).html());
to
$(this).parent().parent().html($(this).html());
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
// Remove this code
//$(this).find('.select').val($(this).html());
// Add this line
$(this).parent().parent().html($(this).html());
});
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
You should use extra class hide so you can control the flow of hide/show and try to give your default text a class for example default so you can target it and update it without touching the html of the select with following code :
$(this).parents('.select').find('.default').text( $(this).text() );
Hope this helps.
Snippet
$(function(){
$("body").on('click', '.select',function (e) {
$(this).find('ul li').toggleClass('hide');
});
$("body").on('click', '.select ul li', function(e) {
$(this).parents('.select').find('.default').text( $(this).text() );
});
})
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
padding: 1px;
}
.select ul li.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">
<span class='default'>Select Box1</span>
<ul>
<li class="hide">1234</li>
<li class="hide">5678</li>
<li class="hide">0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">
<span class='default'>Select Box2</span>
<ul>
<li class="hide">abcd</li>
<li class="hide">efgh</li>
<li class="hide">ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">
<span class='default'>Select Box3</span>
<ul>
<li class="hide">apples</li>
<li class="hide">bananas</li>
<li class="hide">oranges</li>
</ul>
</div>
I'm looking to have an additional subnav to this accordion menu. I tried to add a child element to the nav ul li, but that didn't seem to work. Ideally, I would like to be able to list web projects under "web" and print under "print".
FIDDLE: http://jsfiddle.net/schermerb/rGMAu/1/
.header button {
cursor:pointer;
float:right;
padding:5px;
margin:10px 10px;
border:none;
border:1px solid #ececec;
background:#444;
color:#ececec;
}
.nav {
text-align:center;
background:#444;
}
.nav ul li {
text-transform:capitalize;
display:block;
border-bottom:1px solid #ececec;
}
.nav a {
display:block;
padding:10px;
color:#ececec;
}
.nav a:hover {
background:#029b9d;
color:#ececec;
}
<button id="show">Menu <span>+</span> <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Web
</li>
<li>Print
</li>
</ul>
</div>
I have updated your js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
Updated jsFiddle File
Adding a child element was the right path.
http://jsfiddle.net/jonigiuro/rGMAu/2/
<li>Web
<ul class="sub">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</li>
You hide the child element by default, and when you hover on the parent, you show the it:
ul li:hover ul
Here's the revelant css for your case:
.nav ul li ul {
color: red;
margin: 0;
padding: 0;
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li ul li {
padding: 10px 0;
}