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();
});
Related
i'm a new javascript programer and i want to write a script which can create a dropdown menu automatic with underscore before the text from this:
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-4'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
</ul>
Then using javascript to check the item if it has underscore then create dropdown like this
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a>
<ul class='sub-nav'>
<li><a href='/item-1-1'>Sub-Item 1</a></li>
<li><a href='/item-1-2'>Sub-Item 2</a></li>
<li><a href='/item-1-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
</ul>
</li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a>
<ul class='sub-nav'>
<li><a href='/item-4-1'>Sub-Item 1</a></li>
<li><a href='/item-4-2'>Sub-Item 2</a></li>
<li><a href='/item-4-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
</ul>
</li>
</ul>
And i have try something like this
function underScored(){
var a = document.querySelector(".prime-nav"),
b = document.querySelectorAll(".prime-nav>li"),
d = document.createElement("ul");
for(var i = 0 ; i < b.length; i++){
var e = b[i].querySelector("a");
if(e.textContent.indexOf("_")>-1){
d.appendChild(b[i])
}
b[i].appendChild(d)
}
}
underScored()
and it's only group a first item in the list
What you did is quite weird. I think you should take some time to give some good names to your variable. Letters are not very good to understand what you are handling.
Then, try to understand each line of your code, what did you exactly do.
Here is a solution for your problem, I hope it'll help you:
const underScored = () => {
const lis = [];
// Let's store HTML elements in an array to use them easier later.
for(const item of document.querySelectorAll('li')) {lis.push(item);}
// First, let's build groups of items.
const groupsOfUnderscoreItem = lis.filter(li => li.textContent.startsWith('_')).reduce((acc, item) => {
const href = item.querySelector('a').getAttribute('href');
const root = href.substring(0, href.lastIndexOf('-'));
acc[root] = acc[root] || [];
acc[root].push(item);
return acc;
}, {});
// Then, let's perform the modifications to the HTML DOM.
Object.keys(groupsOfUnderscoreItem).forEach(group => {
const newList = document.createElement("ul");
newList.classList.add('sub-nav');
const rootElt = document.querySelector(`a[href='${group}']`);
groupsOfUnderscoreItem[group].forEach(li => {
newList.appendChild(li);
const a = li.querySelector('a');
a.textContent = a.textContent.substring(1);
});
rootElt.parentNode.appendChild(newList);
});
};
underScored();
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-4'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
</ul>
Using Javascript Fiddle
var dom = "";
var next = false;
var selected = document.querySelectorAll('.prime-nav li');
var len = selected.length - 1;
selected.forEach(function(elem, index) {
var text = elem.innerText;
if (text.startsWith('_')) {
elem = elem.outerHTML.replace('>_', '>');
var prepend = "";
if (!next)
prepend = "<ul class='sub-nav'>";
dom += prepend+elem;
next = true;
} else {
if (next)
dom += "</ul>";
dom += elem.outerHTML;
next = false;
}
if (next & index == len) {
dom += "</ul>";
}
});
document.getElementsByClassName("prime-nav")[0].innerHTML = dom;
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li>
</ul>
Using Jquery
Here is how I did fiddle:
var dom = "";
var next = false;
var len = $('.prime-nav li a').length - 1;
$('.prime-nav li a').each(function(index) {
var text = $(this).text();
var _li = $(this).parents('li');
if (text.startsWith('_')) {
$(this).text(text.replace('_', ''));
var prepend = "";
if (!next)
prepend = "<ul class='sub-nav'>";
dom += prepend + _li[0].outerHTML
_li.remove();
next = true;
} else {
if (next)
dom += "</ul>";
dom += _li[0].outerHTML;
next = false;
}
if (next & index == len) {
dom += "</ul>";
}
});
$('.prime-nav').html(dom);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li>
</ul>
Hi everyone i want to make a list from a short code
I want to move (with javascript or jQuery) from this:
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sub-menu</a></li>
<li><a href='#'>_Sub-Menu child 1</a></li>
<li><a href='#'>_Sub-Menu child 2</a></li>
<li><a href='#'>_Sub-Menu child 3</a></li>
<li><a href='#'>__Sub-Menu child 3.1</a></li>
<li><a href='#'>__Sub-Menu child 3.2</a></li>
<li><a href='#'>__Sub-Menu child 3.3</a></li>
<li><a href='#'>Example</a></li>
</ul>
To this :
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li class='hasSub1'>
<a href='#'>Sub-menu</a>
<ul class='subMenu1'>
<li><a href='#'>Sub-Menu child 1</a></li>
<li><a href='#'>Sub-Menu child 2</a></li>
<li class='hasSub2'>
<a href='#'>Sub-Menu child 3</a>
<ul class='subMenu2'>
<li><a href='#'>Sub-Menu child 3.1</a></li>
<li><a href='#'>Sub-Menu child 3.2</a></li>
<li><a href='#'>Sub-Menu child 3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Example</a></li>
</ul>
The Method is when someone make a list and use "_" this second list be inside the before list or the double of "__" like the example that i make, and also we can make an infinite list like this method not just one time.
I tried to make the first level of the script _
This is what i make:
<script>
$("#LinkList1").each(function() {
var e = "<ul id='nav'><li><ul id='sub-menu'>";
$("#LinkList1 li").each(function() {
var t = $(this).text(),
n = t.substr(0, 1),
r = t.substr(1);
"_" == n ? (n = $(this).find("a").attr("href"), e += '<li><span class="lint-span">' + r + "</span></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><span class="lint-span">' + t + "</span><ul id='sub-menu'>")
});
e += "</ul></li></ul>";
$(this).html(e);
$("#LinkList1 ul").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
});
$("#LinkList1 li").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
})
});$('#sub-menu').parent().addClass('hasSub');
</script>
Note that : #LinkList1 is a Div (Parent of All elements) and just adding a class and span in the element but when i tried to make the second Level __ (two _) it doesn't work for me perfectly paisley when we all a multiple list
I have create a function with each <a> into your nav menu list.
Please try below:
$(document).ready(function () {
var list = $("<ul />");
$("ul#nav a").each(function(i,e){
var iter = $($(this).html().match(/\_/g)).length;
var href = $(this).attr("href");
if(iter>0){
if(list.find("ul").hasClass("subMenu"+iter)){
list.find(".subMenu" + iter).append("<li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li>");
}else{
list.find("li").last().append("<ul class='subMenu"+iter+"'><li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li></ul>").addClass("hasSub"+iter);
}
}else{
list.append("<li><a href='"+href+"'>" + $(this).text() + "</a></li>");
}
})
$("#nav").empty().append(list);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='nav' >
<li><a href='#'>Home</a></li>
<li><a href='#'>Sub-menu</a></li>
<li><a href='#'>_Sub-Menu child 1</a></li>
<li><a href='#'>_Sub-Menu child 2</a></li>
<li><a href='#'>_Sub-Menu child 3</a></li>
<li><a href='#'>__Sub-Menu child 3.1</a></li>
<li><a href='#'>__Sub-Menu child 3.2</a></li>
<li><a href='#'>__Sub-Menu child 3.3</a></li>
<li><a href='#'>___Sub-Menu child 3.3.1</a></li>
<li><a href='#'>Example</a></li>
</ul>
Think this will help you..:D
function changer(){
var first = $('#nav li');
var inserter = '';
var _counter,prev = 0;
while(typeof first.html() != "undefined"){
var len = $(first.html().match(/\_/g)).length;
if(len>prev) while(len>prev){inserter += '<ul clas="Submenu'+len+'">';prev++;}
else if(len<prev) while(len<prev){inserter += '</ul>';prev--;}
inserter += '<li>'+first.html().replace(/\_/g,'')+'</li>';
first = first.next();
}
while(prev>0){insert += "</ul>";prev--;}
$('#nav').empty().append(inserter);
}
$(document).ready(function(){
changer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sub-menu</a></li>
<li><a href='#'>_Sub-Menu child 1</a></li>
<li><a href='#'>_Sub-Menu child 2</a></li>
<li><a href='#'>_Sub-Menu child 3</a></li>
<li><a href='#'>__Sub-Menu child 3.1</a></li>
<li><a href='#'>__Sub-Menu child 3.2</a></li>
<li><a href='#'>__Sub-Menu child 3.3</a></li>
<li><a href='#'>Example</a></li>
</ul>
Do you mean that when you press for example "hasSub1" it expands and shows "subMenu1" (which was hidden before)?
Jquery:
$(document).ready(function(){
$( "a" ).click(function() {
$(this).siblings().toggle();
});
});
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 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
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');
});