Удалить прозрачность в раскрывающемся меню Javascript
Я пытался реализовать функцию, которая убирает прозрачность раскрывающегося меню на моем веб-сайте, чтобы оно было действительно читаемым для посетителей.
Код, который я сейчас использую, который удаляет прозрачность при прокрутке, но не при раскрывающемся списке:
$(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');
});
});
Любая помощь будет принята с благодарностью!
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Без html, к которому это подключается, немного сложно ответить на ваш вопрос.
Но, учитывая тот факт, что прокрутка выполняет свою работу, единственный элемент, который я вижу, который может препятствовать желаемой функциональности, - это то, что ваш селектор для добавления обработчика событий show либо не выбирает ничего конкретного, либо элемент в DOM, который не является Выпадающий элемент bootstrap, который запускает show.bs.dropdown, что является моим аргументом в пользу первого оператора.
Вы можете попробовать следующий код отладки, чтобы проверить:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.info($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.info('triggered');
});
Надеюсь, это поможет вам найти решение. Удачного кодирования!
см. документацию по адресу http://api.jquery.com/on/, и должно стать очевидным, почему ваши причудливые именованные события никогда не запускаются (без определения какого-либо пространства имен событий в первую очередь).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
селектором DOM также может быть #transmenu.dropdown вместо #transmenu .dropdown (в зависимости от того, присутствуют ли атрибуты id и class на выбранном узле DOM - или если один из них выбирает родительский узел с помощью id и есть / есть вложенные узлы с атрибутом class) .