[英]How to reveal hidden div on click
我有一个隐藏的div,可在单击时成功滑出。 但是,该div内的内容取决于单击哪个链接,而我试图根据单击哪个链接来显示/隐藏它。
JS提琴这里 。
非常感谢所有帮助
的HTML
<div id="main-nav">
<ul class="list-unstyled">
<li class="sub director-sub"><a href="/directors">Directors</a></li>
<li><a href="/News">News</a></li>
<li class="sub contact-sub"><a href="/Contact">Contact</a></li>
<li>
<ul class="list-inline social">
<li class="fb"><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" target=_"blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
</ul><!-- /.list-inline social -->
</li>
<li class="sparks">
lorem ipsum
</li>
</ul><!-- /.list-unstyled -->
</div><!-- /#main-nav -->
<div id="sub-nav">
<div class="sub-content">
<!--begin directors-->
<div class="directors-subnav">
<h2 style="background:orange;">Directors Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
<!--begin Contact-->
<div class="contact-subnav">
<h2 style="background:green;">Contact Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
</div><!-- /.sub-content -->
</div><!-- /#subnav -->
JS在这里:
$(document).ready(function(){
//get nav container width
var boxWidth = $('#sub-nav').width();
// hide subnav
$('#sub-nav').width(0);
$('.directors-subnav, .contact-subnav').hide();
//set nav width to zero
$('#main-nav li.sub a').click(function(e){
// remove opened class from other links not clicked
$("#main-nav li.sub a").not(this).removeClass('opened');
e.preventDefault();
if($(this).hasClass('opened')){
// slide the box closed
$("#sub-nav").animate({
width: '0' + 'px'
});
} else {
$("#sub-nav").animate({
width: boxWidth + 'px'
});
}
// toggle class so we can animate box based on class
$(this).toggleClass('opened');
/****** show/hide of page specific content******/
if($(this).parent().hasClass('.director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
$console.log('directors clicked');
} else if($(this).parent().hasClass('.contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
$console.log('contact clicked');
}
/****** end show/hide of page specific content******/
})
})
您不需要在第34和40行的hasClass
中的点。它应该是hasClass('director-sub')
而不是hasClass('.director-sub')
这就是你所需要的。
几件事需要改变。
在两个hasClass函数参数中,类名都不能以“。”开头。
在console.log语句中,不能有$前面的控制台。
html中也有错误。 在一个位置(第14行),您需要使用target =“ blank”而不是target = “ blank”。
这些更改使上面的代码变得有些混乱。
谢谢
帕拉斯
/****** show/hide of page specific content******/
if($(this).parent().hasClass('director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
console.log('directors clicked');
} else if($(this).parent().hasClass('contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
console.log('contact clicked');
}
/****** end show/hide of page specific content******/
只需将其从hasClass('。className')更改为hasClass('className')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.