删除菜单上的透明度下拉Javascript

时间:2018-05-30 18:53:02

标签: javascript web

我一直在尝试实现一项功能,该功能会删除我网站上下拉菜单的透明度,以便访问者真正可以阅读。

我目前正在使用的代码,它会删除滚动的透明度但不会删除下拉列表:

$(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');
            });
        });

任何帮助将不胜感激!

谢谢!

2 个答案:

答案 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(取决于idclass属性是否存在于DOM节点上以供选择 - 或者如果选择了id之前的父节点,并且存在具有class属性的嵌套节点。)