Question

现在我遇到了一些问题，因为我上周正在学习javascript / jquery。

我的代码目前正在设置，以便在彼此旁边有一个菜单和一个搜索栏。单击菜单后，搜索栏将消失。单击搜索栏时，菜单消失。当单击文档上的任何其他位置时，它们将返回其默认状态。问题是，当我单击其中一个子菜单按钮时，事情也会恢复为默认值。因此，当我点击下拉菜单时，我试图想办法让菜单保持打开状态。

Here is my jsfiddle.

以下是我用来完成隐藏/显示的jquery：

jQuery(function($) {
$('.input-text').on('focus', function() {
    $('#mobnav-trigger').css({
        display: 'none'
    });
    $('#search_mini_form').css({
        width: '100%',
        transition: 'width .4s ease'
    });
    $('#search_mini_form .input-text').css({
        height: '45px',
        border: '2px solid #16a085'
    });
});
$(document).on('click', function(e) {
    if ( ! $(e.target).closest('.input-text').length ) {
        $('#mobnav-trigger').css({
            display: 'block'
        });
        $('#search_mini_form').css({
        width: '48%',
        transition: 'width 0s'
        });
        $('#search_mini_form .input-text').css({
        height: '49px',
        border: '0'
    });
    }
});
$('#mobnav-trigger').on('click', function() {
    $('#search_mini_form').css({
        display: 'none'
    });
    $('#mobnav').css({
        width: '100%',
        transition: 'width .4s ease'
    });
    $('.vertnav-top.mobile').css({
        width: '100%',
        maxHeight: '9999px',
        transition: 'width .0s'
    });
    $('.vertnav-top.mobile.show').css({
        maxHeight: '9999px'
    });
});
$(document).on('click', function(e) {
    if ( ! $(e.target).closest('#mobnav-trigger').length ) {
        $('#search_mini_form').css({
            display: 'block'
        });
        $('#mobnav').css({
        width: '48%',
        transition: 'width 0s'
        });
        $('.vertnav-top.mobile').css({
        width: '48%',
        transition: 'width 0s',
        maxHeight: '0px'
        });
        $('.vertnav-top.mobile.show').css({
        maxHeight: '0px'
        });
    }
});
$('.opener').on('click', function() {
    $('#search_mini_form').css({
        display: 'none'
    });
    $('#mobnav').css({
        width: '100%',
        transition: 'width .4s ease'
    });
    $('.vertnav-top.mobile').css({
        width: '100%',
        maxHeight: '9999px',
        transition: 'width .0s'
    });
    $('.vertnav-top.mobile.show').css({
        maxHeight: '9999px'
    });
});
$(document).on('click', function(e) {
    if ( ! $(e.target).closest('.nav-container').length ) {
        $('#search_mini_form').css({
            display: 'block'
        });
        $('#mobnav').css({
        width: '48%',
        transition: 'width 0s'
        });
        $('.vertnav-top.mobile').css({
        width: '48%',
        transition: 'width 0s',
        maxHeight: '0px'
        });
        $('.vertnav-top.mobile.show').css({
        maxHeight: '0px'
        });
    }
});
});

我知道这会更容易＆＃39;和＆＃39;清洁＆＃39;在点击时更改css类/ ID，但由于我工作的是已经构建/复杂的magento主题，我想我最初会走这条路线，然后专注于稍后重新装配它路。

Answer 1

解决了它。

enter link description here

只需删除此代码

$(document).on('click', function(e) {
if ( ! $(e.target).closest('#mobnav-trigger').length ) {
    $('#search_mini_form').css({
        display: 'block'
    });
    $('#mobnav').css({
    width: '48%',
    transition: 'width 0s'
    });
    $('.vertnav-top.mobile').css({
    width: '48%',
    transition: 'width 0s',
    maxHeight: '0px'
    });
    $('.vertnav-top.mobile.show').css({
    maxHeight: '0px'
    });
}
});

jquery在div之外点击其他任何地方时更改css

1 个答案: