[英]jQuery Navigation - need help with positioning and accordion behavior
这里的侧边栏导航: http://dev.southernlivingplants.com/in_the_garden需要一些 TLC。
我正在尝试解决几个问题,并且可以使用一些帮助:
手风琴动作工作正常,但单行项目链接(不手风琴)没有正确链接到他们的页面。 是什么阻止了这一点?
打开手风琴(如 The Collection),如果您将鼠标悬停在它下方的父链接上 Find your Zone,它将突出显示它之前的整个部分。
有没有办法在特定页面上保持部分打开?
这是代码:
HTML
<ul id="menu" class="menu noaccordion">
<li><a class="m1" href="#">the collection</a>
<ul>
<li><a href="http://dev.southernlivingplants.com/shrubs/">shrubs</a></li>
<li><a href="http://dev.southernlivingplants.com/groundcovers_grasses/">groundcovers/<br />grasses</a></li>
<li><a href="http://dev.southernlivingplants.com/trees/">trees</a></li>
<li><a href="http://dev.southernlivingplants.com/tropicals/">tropicals</a></li>
<li><a href="http://dev.southernlivingplants.com/fall_bulbs/">fall bulbs</a></li>
<li><a href="http://dev.southernlivingplants.com/spring_bulbs/">spring bulbs</a></li>
<li><a href="http://dev.southernlivingplants.com/annuals/">annuals</a></li>
<li><a href="http://dev.southernlivingplants.com/perennials/">perennials</a></li>
</ul>
</li>
<li><a class="m2" href="http://dev.southernlivingplants.com/find_your_zone">find your zone</a></li>
<li><a class="m3" href="#">in the garden</a>
<ul>
<li><a href="http://dev.southernlivingplants.com/care_tips/">care tips</a></li>
<li><a href="http://dev.southernlivingplants.com/color_guide/">color guide</a></li>
<li><a href="http://dev.southernlivingplants.com/common_pests/">common pests</a></li>
</ul>
</li>
<li><a class="m4" href="http://dev.southernlivingplants.com/where_to_buy">where to buy</a></li>
<li>
<a class="m5" href="#">about us</a>
<ul>
<li><a href="http://dev.southernlivingplants.com/history">history</a></li>
<li><a href="http://dev.southernlivingplants.com/media_room/">media room</a></li>
<li><a href="http://dev.southernlivingplants.com/events">events</a></li>
<li><a href="http://dev.southernlivingplants.com/botanical_gardens">botanical gardens</a></li>
<li><a href="http://dev.southernlivingplants.com/testimonials">testimonials</a></li>
</ul>
</li>
<li><a class="m6" href="http://dev.southernlivingplants.com/video/">plant videos</a></li>
<li><a class="m7" href="http://dev.southernlivingplants.com/contact_us">contact us</a></li>
</ul>
Javascript:
function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
CSS:
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 10em;
float: left;
}
ul.menu a {
display: block;
text-decoration: none;
font-size: 15px;
color: #54301A;
}
ul.menu li {
margin-top: 1px;
border-bottom: 1px solid #54301A;
}
ul.menu li a {
/* background: #f8f2e3; */
color: #000;
padding: 0.5em;
}
ul.menu li a:hover {
background: #f8f2e3;
}
ul.menu li ul li {
border-bottom: 1px dotted #54301A;
}
ul.menu li ul li a {
/* background: #f8f2e3; */
color: #000;
padding-left: 15px;
}
ul.menu li ul li a:hover {
background: #f8f2e3;
/* border-left: 5px #000 solid; */
padding-left: 15px;
}
谢谢!
以下是您的问题的答案:
1) return false;
以下代码中的语句阻止了正常行为:
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
2)添加clear: left;
到下面的 CSS 选择器ul.menu li
3) 是的,这可以使用 Javascript,但需要一些工作:)
移除第三个if
块,并return false;
在您的一些 CSS 规则中添加了>
希望我有一个更清晰的答案,但看起来您的 .click .click()
function 正在消耗点击事件,而不是将其传递给元素本身。 通常这是通过调用stopPropagation()
显式完成的,但由于您没有在此处执行此操作,我认为该事件仍会触发 href。
也许您可以在if($('#' + parent).hasClass('noaccordion'))...
附近的 if 语句附近的 javascript 中显式重定向浏览器作为解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.