Question

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

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

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

任何帮助将不胜感激！

谢谢！

Answer 1

如果没有html，那么它就会很难回答你的问题。

但是考虑到滚动完成工作这一事实，我能看到的唯一可能阻止你想要的功能的元素是你添加show event handler的选择器要么特别选择任何东西，要么是DOM中的一个元素不是触发＆＃39; show.bs.dropdown＆＃39;的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'); 
});

希望能帮助您找到解决方案。快乐的编码！

Answer 2

请参阅http://api.jquery.com/on/上的文档，这一点很明显，为什么你的花哨命名事件永远不会被触发（首先没有定义任何事件名称空间）。

$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});

DOM选择器也可能是#transmenu.dropdown而不是#transmenu .dropdown（取决于id和class属性是否存在于DOM节点上以供选择 - 或者如果选择了id之前的父节点，并且存在具有class属性的嵌套节点。）

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

2 个答案: