Any suggestions would be good. It is very simple but I cannot figure it out.
I am using a simple jQuery accordion script. Here is the HTML:
<ul id="menu">
<li>
<a>Weblog Tools</a> <!-- THIS IS MY LINK BUTTON -->
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a>Programming Languages</a> <!-- THIS IS MY LINK BUTTON -->
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
</ul>
And here is the script:
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('a.collapse').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {initMenu();});
Nice simple script, nice and light.
This is my question, any suggestions would be amazing!
I need to get the <a>Link Button</a>
in the current visible menu to be display: none
and alternate b开发者_如何学Cetween open menus.
So the idea is, when the current visible menu is open, the link that opens it has a the style display: none
added to it. But all the other <a>Link Buttons</a>
should be visible and not have the style display: none
applied. This is so the menu can still be functional.
Only the visible open menu should have display: none
.
This would be so awesome if you can help. Thanks in advance.
Modify menu.js from
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
To this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu li a').show();
$(this).hide();
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
I modified the first part so it won't show the first sub menus. Then I added this lines so that it will show the other links, but hide the active link.
$('#menu li a').show();
$(this).hide();
EDIT:
You can also check a working implementation at http://jsfiddle.net/3cmPz/
精彩评论