I have created a slidetoggle but it's not working. Generrally if I hovered on the year the months will display via slidetoggle but its not working...Probably the class on the script is wrong. Sample fiddle
HTML:
<div class="smart-archives">
<ul>
<a class="year-link" href="http://net/2015">2015</a>:
<li><a class="month-link" href="http://.net/2015/01" title="1 post">January</a></li>
<li><a class="month-link" href="http://.net/2015/02" title="1 post">February</a></li>
<li><a class="month-link" href="http://.net/2015/03" title="16 posts">March</a></li>
<li><a class="month-link" href="http://.net/2015/04" title="13 posts">April</a></li>
<li><a class="month-link" href="http://.net/2015/05" title="9 posts">May</a></li>
<li><a class="month-link" href="http://.net/2015/06" title="4 posts">June</a></li>
<li class="empty-month">July</li>
<li class="empty-month">August</li>
<li class="empty-month">September</li>
<li class="empty-month">October</li>
<li class="empty-month">November</li>
<li class="empty-month">December</li>
</ul>
<ul>
<a class="year-link" href="http://.net/2014">2014</a>:
<li class="empty-month">January</li>
<li><a class="month-link" href="http://.net/2014/02" title="14 posts">February</a></li>
<li><a class="month-link" href="http://.net/2014/03" title="25 posts">March</a></li>
<li><a class="month-link" href="http://.net/2014/04" title="11 posts">April</a></li>
<li><a class="month-link" href="http://.net/2014/05" title="11 posts">May</a></li>
<li><a class="month-link" href="http://.net/2014/06" title="5 posts">June</a></li>
<li><a class="month-link" href="http://.net/2014/07" title="4 posts">July</a></li>
<li><a class="month-link" href="http://.net/2014/08" title="6 posts">August</a></li>
<li><a class="month-link" href="http://.net/2014/09" title="6 posts">September</a></li>
<li><a class="month-link" href="http://.net/2014/10" title="3 posts">October</a></li>
<li><a class="month-link" href="http://.net/2014/11" title="4 posts">November</a></li>
<li><a class="month-link" href="http://.net/2014/12" title="1 post">December</a></li>
</ul>
</div>
CSS:
ul li { display:none; }
.empty-month { display: none; }
SCRIPT:
$("ul > li").hover(function () {
$(this).children("ul li").slideToggle("fast");
});
You should slide toggle sibling lis on hover of anchor as below:
DEMO
$("ul > a").hover(function () {
$(this).siblings("li").slideToggle("fast");
});
and you might face below problems here if you keep that option on hover
It might not work on properly on mobile
It will not allow you to click on the months once you hoverout of the link
So What I suggest is do the same functionality on click like
DEMO FOR CLICK
$("ul > a").click(function (e) {
e.preventDefault();
$(this).siblings("li").slideToggle("fast");
});
li is the old valid child of ul so
<ul>
<li><a class="year-link" href="http://thegypsetters.net/2015">2015</a>:</li>
<li><a class="month-link" href="http://thegypsetters.net/2015/01" title="1 post">January</a>
then
$("ul > li:has(.year-link)").hover(function () {
$(this).siblings().slideToggle("fast");
});
and
ul li {
display:none;
}
ul li:first-child {
display: list-item;
}
Demo: Fiddle
Related
I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});
Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>
I have tried a sample of Vertical menu from CSSmenu site, sample source code working and menu is expanding as per the sample, when i try to add the menu dynamically, those menu's are not expanding even i have verified the final object structure.
Code with dynamic menu:
<body>
<script>
/**
* Comment
*/
function add() {
var list = document.getElementById('list');
var elem=document.createElement('li');
elem.setAttribute('class','last has-sub');
elem.innerHTML="<a href='#'><span>My_Products</span></a>"
+"<ul style='display: none;' >"
+"<li><a href='#'><span>Product 1</span></a></li>"
+"<li><a href='#'><span>Product 2</span></a></li>"
+"<li class='last'><a href='#'><span>Product 3</span></a></li>"
+ "</ul>";
list.appendChild(elem);
}
</script>
<div id='cssmenu'>
<ul id='list'>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</li>
</ul>
</div>
<input type="button" value="Add Menu" onclick="add()">
</body>
script.js in this "library" has line:
$('#cssmenu > ul > li > a').click(function() {
So dynamically created elements will not be handled with this click handler. You can modify script's line, transforming this handler into delegated event handler:
$('#cssmenu').on('click', '#list > li > a', function() {
Can you please take a look at this demo and let me know why click on list is not firing any function to page?
<ul id="slider">
<li class="expandOnClick">
One
</li>
<li class="expandOnClick">
Two
<ul class="musthidden">
<li><a class="prevent" href="#">Two _ 1</a></li>
<li><a class="prevent" href="#">Two _ 2</a></li>
<li><a class="prevent" href="#">Two _ 3</a></li>
<li><a class="prevent" href="#">Two _ 4</a></li>
</ul>
</li>
<li class="expandOnClick">
Three
<ul class="musthidden">
<li><a class="prevent" href="#">Three _ 1</a></li>
<li><a class="prevent" href="#">Three _ 2</a></li>
<li><a class="prevent" href="#">Three _ 3</a></li>
<li><a class="prevent" href="#">Three _ 4</a></li>
</ul>
</li>
<li class="expandOnClick">
Four
</li>
</ul
Style:
.musthidden {
display:none;
}
ul
{
list-style-type:none;
}
li{
background-color:#2d2d2d;
}
li:hover{
background-color:#ccc;
}
Script:
$(".expandOnClick").click(function (e) {
e.preventDefault();
$(".musthidden").slideUp();
$(this).parent("li").each(function () {
if ($('.musthidden', this).css('display') == 'none') {
$(".musthidden", this).slideDown();
}
});
});
Thanks
1
i Think this is what you are trying to do http://jsfiddle.net/f27bp/11/ Use prevent default at the end of the function and use jquery.children to apply the function on children.
$(".expandOnClick").click(function (e) {
$(this).siblings().children(".musthidden").slideUp();
$(this).children(".musthidden").slideDown();
e.preventDefault();
});
I have
<ul>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">New Plan</a></li>
<li><a onclick="setSelectedTestPlan();" href="javascript:void(0);">Test</a></li>
</ul>
code and wants to add class name to a tag parrent tag li i.e. class="selected" bu sing jquery.
I used this jquery code
function setSelectedTestPlan() {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(this).closest('li').addClass("selected");
}
But this line jQuery(this).closest('li').addClass("selected"); doesn't work...
Please help me out...
HTML
<li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li>
js
function setSelectedTestPlan(el) {
jQuery("#tree ul li").removeClass("selected");
jQuery(el).closest('li').addClass("selected");
}
or
js
function setSelectedTestPlan(el) {
jQuery(el).closest('li').addClass("selected").siblings().removeClass("selected");
}
You need to send the element through the function like this
HTML
onclick="setSelectedTestPlan(this);"
js
function setSelectedTestPlan(ele) {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(ele).closest('li').addClass("selected");
}
One line:
jQuery(this).closest('li').addClass("selected").siblings().removeClass("selected");
but you will have to amend your event to pass through 'this';
onclick="setSelectedTestPlan(this);"
function setSelectedTestPlan(e) {
jQuery("#tree ul li").each(function () {
jQuery(this).removeClass("selected");
});
jQuery(e).closest('li').addClass("selected");
}
<li><a onclick="setSelectedTestPlan(this);" href="javascript:void(0);">New Test</a></li>
alternative
<ul>
<li><a class="mylink" href="javascript:void(0);">New Test</a></li>
<li><a class="mylink" href="javascript:void(0);">New Test fdgfdgfdgfdgfdgfdgfdgfdg fdg</a></li>
<li><a class="mylink" href="javascript:void(0);">New Plan</a></li>
<li><a class="mylink" href="javascript:void(0);">Test</a></li>
</ul
$(function(){
$(".mylink").click(function(e){
$(".mylink").parents("li").removeClass("selected");
$(this).parents("li").addClass("selected");
e.preventDefault();
});
});
HTML
<li><a onclick="setSelectedTestPlan.call(this, event);" href="javascript:void(0);">New Test</a></li>
JS
function setSelectedTestPlan(e) {
jQuery(this)closest('li').addClass("selected").siblings().removeClass("selected");
}
I have a page of search results, each of which has an icon to add each result to a group (listed on the page in a hidden UL element: display:none;).
Right now it works... but when I click on the icon for one result listing... the UL appears under every single result.
I need it to only show up for the result listing that I am clicking the icon on... not all the listings...
Currently the onload code is this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
I tried to change it to this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).children("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).children("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
But, yeh.. the icon is highlighted as "current" or active, but the UL does not appear...
Any help would be greatly appreciated.
OOPs. Sorry! Here is the HTML:
<li class='vcard'>
<a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
<div class='user-info'>
<a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
<ul class='attributes'>
<li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
</ul>
</div>
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
<ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</ul>
</li>
You need to correct your markup by moving that <ul> to be a sibling of the anchor, not outside the <li></li> but inside (<ul> can't be a child of a <ul>, it's invalid HTML). Like this:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</li>
</ul>
Then you can use .next() like this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
This uses the .show() and .hide() shortcuts to apply the display as well. Alternatively, you can use .click() to toggle using .toggleClass() and .toggle(), like this:
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});
use .closest() and .next()
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
or you may also try like this,
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});