Блог

Я не слишком разбираюсь в правилах jQuery, и я создал несколько правил для заголовка моей темы, чтобы показывать и скрывать некоторые элементы. Я хотел бы знать, могу ли я сделать его более простым? И как мне добавить его в файл .js, добавленный в мою тему?

Вот код :

 <script>
jQuery(document).ready(function($) {
            var open = false;

            var openSidebar = function() {
                $('div#menu500').addClass('ciShow');
                $('.ciMenuButton').addClass('ciMenuButton-close');
                $('.ciSearchButton').addClass('ciHide');
                $('.ciLanguageButton-wrap').addClass('ciHide');
                $('.ciHeader-logoWrap').addClass('ciHide');
                $('html').addClass('scroll-disabled');
                open = true;

            }
            var openSearchbar = function() {
                $('div#search500').addClass('ciShow ciSearchshow');
                $('.ciMenuButton').addClass('ciMenuButton-close');
                $('.ciSearchButton').addClass('ciHide');
                $('.ciLanguageButton-wrap').addClass('ciHide');
                $('.ciHeader-logoWrap').addClass('ciHide');
                $('html').addClass('scroll-disabled');
                open = true;
            }
            var openLangbar = function() {
                $('ul.ciLanguageButton-menu').addClass('ciShow');
                $('.ciSearchButton').addClass('ciHide');
                $('.ciLanguageButton-wrap').addClass('ciShow');
                open = true;
            }

            var closeAll = function() {
                $('div#menu500').removeClass('ciShow');
                $('div#search500').removeClass('ciShow ciSearchshow');
                $('.ciMenuButton').removeClass('ciMenuButton-close');
                $('.ciSearchButton').removeClass('ciHide');
                $('.ciLanguageButton-wrap').removeClass('ciHide ciShow');
                $('.ciHeader-logoWrap').removeClass('ciHide');
                $('ul.ciLanguageButton-menu').removeClass('ciShow');
                $('.ciLanguageButton').removeClass('ciLanguageButton-open');
                $('html').removeClass('scroll-disabled');
                open = false;
            }

            $('button.ciMenuButton').click(function(event) {
                event.stopPropagation();
                var toggle = open ? closeAll : openSidebar;
                toggle();
            });
            $('button.ciSearchButton').click(function(event) {
                event.stopPropagation();
                var toggle = open ? closeAll : openSearchbar;
                toggle();
            });
            $('button.ciLanguageButton').click(function(event) {
                event.stopPropagation();
                var toggle = open ? closeAll : openLangbar;
                toggle();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('div.ciSidebar--inner').length) {
                    closeAll();
                }
            });
</script>
 

спасибо за вашу помощь.

Мы можем оптимизировать, объявив ссылку на каждый HTML-элемент, чтобы увеличить скорость выполнения jquery.

 jQuery(document).ready(function($) {
    
    var open = false;
    let html=$('html');
    let ref=$('.ciSearchButton,.ciLanguageButton-wrap,.ciHeader-logoWrap');
    let searchRef=$('div#search500');
    let menuRef=$('div#menu500');
    let wrapRef=$('ul.ciLanguageButton-menu,.ciLanguageButton-wrap');

    let ciMenuButton=$('button.ciMenuButton');
    let ciSearchButton=$('button.ciSearchButton');
    let ciLanguageButton=$('.ciLanguageButton');


    var openSidebar = function() {
        open amp;amp; closeAll();
        menuRef.addClass('ciShow');
        ciMenuButton.addClass('ciMenuButton-close');
        ref.addClass('ciHide');
        html.addClass('scroll-disabled');
        open = true;
    }
    
    var openSearchbar = function() {
        open amp;amp; closeAll();
        searchRef.addClass('ciShow').addClass("ciSearchshow");
        ciMenuButton.addClass('ciMenuButton-close');
        ref.addClass('ciHide');
        html.addClass('scroll-disabled');
        open = true;
    }
    
    var openLangbar = function() {
        open amp;amp; closeAll();
        wrapRef.addClass('ciShow');
        ciSearchButton.addClass('ciHide');
        open = true;
    }

    var closeAll = function() {
        menuRef.removeClass('ciShow');
        searchRef.removeClass('ciShow').removeClass('ciSearchshow');
        ciMenuButton.removeClass('ciMenuButton-close');
        ref.removeClass('ciHide');
        wrapRef.removeClass('ciShow');
        ciLanguageButton.removeClass('ciLanguageButton-open');
        html.removeClass('scroll-disabled');
        open = false;
    }

    ciMenuButton.click(function(event) {
        event.stopPropagation();
        openSidebar();
    });
    ciSearchButton.click(function(event) {
        event.stopPropagation();
        openSearchbar();
    });
    ciLanguageButton.click(function(event) {
        event.stopPropagation();
        openLangbar();
    });

    $(document).click(function(event) {
        if (!$(event.target).closest('div.ciSidebar--inner').length) {
            closeAll();
        }
    });
});