我一直在尝试实现一项功能,该功能会删除我网站上下拉菜单的透明度,以便访问者真正可以阅读。
我目前正在使用的代码,它会删除滚动的透明度但不会删除下拉列表:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
我尝试将其更改为此(及其变体)但似乎无法使其正常工作:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
任何帮助将不胜感激!
谢谢!
答案 0 :(得分:0)
如果没有html,那么它就会很难回答你的问题。
但是考虑到滚动完成工作这一事实,我能看到的唯一可能阻止你想要的功能的元素是你添加show event handler的选择器要么特别选择任何东西,要么是DOM中的一个元素不是触发' show.bs.dropdown'的bootstrap下拉元素,这是我对第一个语句的推理。
您可以尝试以下调试代码来验证:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
希望能帮助您找到解决方案。快乐的编码!
答案 1 :(得分:0)
请参阅http://api.jquery.com/on/上的文档,这一点很明显,为什么你的花哨命名事件永远不会被触发(首先没有定义任何事件名称空间)。
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
DOM选择器也可能是#transmenu.dropdown
而不是#transmenu .dropdown
(取决于id
和class
属性是否存在于DOM节点上以供选择 - 或者如果选择了id
之前的父节点,并且存在具有class
属性的嵌套节点。)