"Hide" li on click - javascript

fiddle
I have in index.html:
<div data-role="fieldcontain" id="Container">
<ul id="my_ul" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Text" data-inset="true">
<li class="ui-screen-hidden">12</li>
<li class="ui-screen-hidden">123</li>
<li class="ui-screen-hidden">1234</li>
</ul>
</div>
js:
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
//$(this).hide();
});
So, when I click on li, the text from li go to the input. If I use hide - that element dont apears, when I delete a sting in input.
I need - click on li, text from li apears in input, all dropdown li hides, but if I deleted string from input, li apears. How to do that?
Thanks.

You may try this (To hide the list items after selection)
$("#my_ul li").click(function() {
$('#Container form input').val($.trim($(this).text()));
$('#my_ul').children().addClass('ui-screen-hidden');
});
DEMO.

Hacky solution is to deal with hiding and showing the ul yourself.
Fiddle: http://fiddle.jshell.net/Qyvhc/8/
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
$("#my_ul").hide();
});
$('#Container form input').on('focus', function () {
$("#my_ul").show();
});
I doubt it's the best solution but I can't see anything in the API docs that would achieve this.

I'm pretty new into JQuery but hope this is what you wanted.
Demo

Related

add class to parent li when submenu is active

i am having a problem here despite googling for hours.
i have a menu which has submenus.
<div class="themenu">
<ul>
<li>Link 1 //Want to add class catactive here when the following submenu is active
<div class="thesubmenu">
<ul>
<li class="subcat-active">submenu1</li>
</ul>
</div>
</li>
</ul>
</div>
I tried using this query but its not happening.
$(document).ready(function(){
if($('.thesubmenu ul li').hasClass('subcat-active')){
$(this).parent('.themenu ul li').addClass('cat-active');
}
});
There are many ways to write this but there is no need to iterate (.each()) or use .hasClass() which slow down this simple call.
Simply select the li items with .subcat-active, then use closest('li') to find the closest li ancestor and add the class. You need to use .parent() first because closest() includes the starting element which is also a li.
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').parent().closest('li').addClass('cat-active');
});
http://jsfiddle.net/3ehvqzjh/1/
just do:
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').each(function(){
$(this).parent().closest('li').addClass('cat-active');
});
});
Demo: http://jsfiddle.net/bpkpn6b5/
Here is a DEMO
$(document).ready(function(){
if ($('.thesubmenu ul li').hasClass('subcat-active')) {
$('.thesubmenu ul li').parents('li:eq(0)').addClass('cat-active');
}
});
$(document).ready(function(){
$('.subcat-active').each(function () {
$(this).parents('li').eq(0).addClass('cat-active');
});
});
Working example

A button toggle some <li> from a <ul>

I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..
Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle
$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.

jQuery Updating Class on Parent Item

I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});

How to find a parent's child with jQuery?

I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?
It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);
The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/
Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.

Hide all li tags with jquery

Please help me to complete my code.
I want to hide all <li> tags on body onload.
$(document).ready(function () {
$('li > ul').hide();
});
Please give me the right variant for the code!
It's ul > li, not li > ul
$(document).ready(function () { $('ul > li').hide(); });
$(function(){
$('li').hide()
})
This will search and hide every <li> tag on the page. It is better to narrow down the search to improve performance Ex: $('#mydiv li') where mydiv is the id of the ul tag <ul id="mydiv">.

Categories

Resources