Question

我的网站部分有一个固定的位置，并且里面有一个引导下拉菜单。我遇到的问题是当你点击菜单时，内容被切断了页面。为了解决这个问题，我想在固定部分添加溢出滚动，但仅在单击元素时添加。

我有一部分工作，如果你点击元素并打开菜单然后出现溢出，如果你再次点击该元素，那么溢出会再次隐藏。这就是我的代码看起来像

$('.dropMenu').on('click', function(){
    if($(this).find('.dropdown').hasClass('open')){
        $('.sideContent').css('overflow', 'hidden');
    }else {
        $('.sideContent').css('overflow', 'scroll');
    }
  });

我的问题是，如果您点击页面上的任何其他位置，溢出仍然存在，我希望它消失。反正有吗？

快速小提琴。 http://jsfiddle.net/6r2qJ/

Answer 1

尝试聚焦：

$('.dropMenu').on('click', function(){

    if($(this).find('.dropdown').hasClass('open')){
        $('.sideContent').css('overflow', 'hidden');
    }else {
        $('.sideContent').css('overflow', 'scroll');
    }
}).on('focusout', function(){

        $('.sideContent').css('overflow', 'hidden');

});

这里是小提琴：http://jsfiddle.net/6r2qJ/3/

Answer 2

$(document).click(function () {
    $('.sideContent').css('overflow', 'hidden');
});

$('.dropdown').click(function (event) {
    event.stopPropagation();
});

如果我没有正确理解你，这可能有所帮助。如果你点击按钮$（＆＃39; .dropdown＆＃39;），event.stopPropagation（）禁止关闭菜单，否则它将关闭。

如果点击除按钮以外的任何地方，则隐藏溢出

2 个答案: