Question

我有一个有趣的问题。我收到一个函数的帮助，一旦单击菜单触发器，检查是否已将类添加到div然后显示或淡出。问题是该功能似乎只运行一次。

以下是我所做的片段。

＆＃13;

printf("%zu%, sizeof(i))

＆＃13;

public static class CacheConnection
    {
        private static StackExchangeRedisCacheClient _newconnectionDb;

        public static StackExchangeRedisCacheClient NewConnectionDb
            => _newconnectionDb ?? (_newconnectionDb = NewRedisConnection());

        private static IDatabase _connectionDb;

        public static IDatabase ConnectionDb => _connectionDb ?? (_connectionDb = RedisConnection());

        private static StackExchangeRedisCacheClient NewRedisConnection()
        {
            var serializer = new NewtonsoftSerializer();
            return new StackExchangeRedisCacheClient(Connection, serializer);
        }

        private static IDatabase RedisConnection()
        {
            var cacheDatabase = Connection.GetDatabase();
            return cacheDatabase;
        }

        public static ConnectionMultiplexer Connection => LazyConnection.Value;

        private static readonly Lazy<ConnectionMultiplexer> LazyConnection = new Lazy<ConnectionMultiplexer>(() => ConnectionMultiplexer.Connect(
            System.Configuration.ConfigurationManager.AppSettings["CacheConnectionString"]), LazyThreadSafetyMode.PublicationOnly);
    }

＆＃13;

$(function() {

    $('.trigger').click(function() {
        if( $('.mainNav').hasClass('showMainNav')) {
            $('.mainNav').fadeOut(100, function() {
                $('.mainNav').removeClass('showMainNav');
            });
        } else {
            $('.mainNav').addClass('showMainNav');
        }
    });
});

＆＃13;

制作，任何人都可以帮助我吗？

Answer 1

jQuery fadeOut方法将在内联css上生成display：none。请记住，内联css比类定义的更强。

您可以使用以下代码

$(function() {    
    $('.trigger').click(function() {
        if( $('.mainNav').hasClass('showMainNav')) {
            $('.mainNav').fadeOut(100, function() {
                $('.mainNav').removeClass('showMainNav');
            });
        } else {
            $('.mainNav').fadeIn(100, function() {
                $('.mainNav').addClass('showMainNav');
            });
        }
    });
});

或仅使用jQuery切换方法

$(function() {
    $('.trigger').click(function() {
        $('.mainNav').toggle();
    });
});

Answer 2

使用以下代码：

$('.trigger').click(function() {
            if( $('.mainNav').hasClass('showMainNav')) {
                $('.mainNav').removeClass('showMainNav');
            } else {
                $('.mainNav').addClass('showMainNav');
            }
        });

Answer 3

不是为您的类编写切换代码，而是使用现有的jquery函数toggleClass

$(document).ready(function(){
    $(".trigger").on("click", function() {
        $(".mainNav").toggleClass("showMainNav");
    });
});

演示：JsFiddle

Answer 4

使用fadeOut添加CSS属性"display:none"。如果你想保留动画，你需要做这样的事情。

$(function() {

 $('.trigger').click(function() {
    if( $('.mainNav').hasClass('showMainNav')) {
        $('.mainNav').fadeOut(100, function() {
            $('.mainNav').removeClass('showMainNav');
        });
    } else {
        $('.mainNav').addClass('showMainNav').css("display","");
    }
 });
});

切换功能不起作用 - Jquery

4 个答案: