我的网站菜单分为两部分。
左侧面板和右侧面板。
单击两个菜单按钮之一时,面板会从侧面滑入并覆盖浏览器窗口。
目前我已经使该功能正常工作。
我遇到困难的地方是使用条件语句创建函数的逻辑:
- “如果左侧面板处于“事件”/“可见”状态,并且单击了右侧面板按钮,则将左侧面板滑出 View ,同时滑入右侧面板。”
和虎钳反之亦然。
这是js-fiddle下面是代码:
注意:我尝试在类名 .panel--oneBtn.is-active
时触发警报,但没有任何反应。谢谢
HTML
<div class="wrapper">
<div class="nav_header">
<div class='nav_header_link_wrap abso-left panel--oneBtn'>
<span class="nav_header_link abso-left open">Eat.Drink.Sleep</span>
<span class="nav_header_link abso-left close">Close</span>
</div>
<div class='nav_header_link_wrap abso-right panel--twoBtn'>
<span class="nav_header_link abso-right open">Bookings/Contact</span>
<span class="nav_header_link abso-right close">Close</span>
</div>
</div>
<div class="menuPanel panel--one"></div>
<div class="menuPanel panel--two"></div>
</div>
JS
function navSlider(){
var $buttonOne = $('.panel--oneBtn'),
$buttonTwo = $('.panel--twoBtn');
$buttonOne.on('click', function() {
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
$buttonTwo.on('click', function() {
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
if ( $buttonOne.hasClass('is-active') ){
alert('Left is active');
} else if ($buttonTwo.hasClass('is-active') ){
alert('Right is active');
}
}
navSlider();
最佳答案
这是您想要的效果吗?
https://jsfiddle.net/snookieordie/oez0488h/41/
$buttonOne.on('click', function() {
//added this code
if ( $buttonTwo.hasClass('is-active') ) {
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$buttonTwo.toggleClass('is-active');
}
//
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
$buttonTwo.on('click', function() {
//added this code
if ( $buttonOne.hasClass('is-active') ) {
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$buttonOne.toggleClass('is-active');
}
//
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
关于javascript - 对菜单使用条件语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34150043/