Question

我想创建一个小而精简的菜单，隐藏在特定视口高度的滚动上，单击按钮后显示自己，我做了，但我遇到了2个问题：

以下是 Fiddle ，供您跟进。

当您通过单击显示的菜单显示菜单时，只有向下或向上滚动才能消除该菜单。如果我点击#sideBar容器外的某个地方，我怎么能让它消失呢该网站。
当您使用软刷新（F5）刷新页面时，会出现菜单，因为浏览器会理解该页面已被滚动。还有办法绕过这个吗？

这是一些代码，只是因为小提琴需要它：

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 400) {
        $('#sideBar').slideUp("fast");
        $('#menuButton').fadeIn();
    } else {
        $('#sideBar').slideDown("slow");
        $('#menuButton').fadeOut();
    }
});

$(document).ready(function(){
    $('#menuButton').click(function(){
        $('#sideBar').slideDown();
    })
});

提前致谢！

Answer 1

我可以帮助解决第一个问题，你可以在下面改变你的JQuery代码，这样当父母的内容＆＃39;单击容器，菜单向上滑动。

    $(document).ready(function(){
      $('#menuButton').click(function(){
        $('#sideBar').slideDown();
      })

      $('#content').click(function(){
        $('#sideBar').slideUp();
      })
   });

我不确定我是否遵循了第二个问题？请您提供更多关于您的意思的信息。

Answer 2

问题1，只需将以下代码放入就绪功能

即可

#----------------------dont change----------------------------------
if(require("xlsxjars") == FALSE){
  install.packages("xlsxjars")
  require("xlsxjars")
}

if(require("xlsx") == FALSE){
  install.packages("xlsx")
  require("xlsx")
}

if(require("ggplot2") == FALSE){
  install.packages("ggplot2")
  require("ggplot2")
}

D.Data <- read.xlsx(V.FileName, 
                sheetIndex = 1)

#-----------------------------------growth rate

L.CurrentCells <- ((D.Data["CellCount"] / D.Data["Squares"]) * 10000 * D.Data["Volume"])

D.Data$growth <- (L.CurrentCells / D.Data["CellPlated"]) ^ (1/D.Data["Days"])

#---------------------------------------------

L.Pieces <- unique(D.Data$UCPDate)

for(i in 1:length(L.Pieces)){

  D.Subset <- subset(D.Data, UCPDate == L.Pieces[i])  

  P.Plot1 <- ggplot(D.Subset, 
    aes(x=Passage,y=growth)) + 
    geom_line() +
    facet_grid(Sample~.)

    P.Plot1
}

<强> EDITED

对于问题2，将以下代码放入就绪功能

let captureTaps = UITapGestureRecognizer()
captureTaps.cancelsTouchesInView = true
dimmedOverlay?.addGestureRecognizer(captureTaps)

简而言之，您的就绪功能应该看起来像

$('#content').click(function(){
    $('#sideBar').slideUp();
});

}）;

Answer 3

测试目标：

DEMO

function hideIt() {
        $('#sideBar').slideUp("fast");
        $('#menuButton').fadeIn();

}
function showIt() {
        $('#sideBar').slideDown("slow");
        $('#menuButton').fadeOut();
}

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 400) {
        hideIt()
    } else {
        showIt();
    }
});

$(function(){
    if ($(document).scrollTop() < 400) showIt(); // show at start

    $('#menuButton').click(function(){
        $('#sideBar').slideDown();
    });
    $(document).on("click",function(e) {
      var target = $(e.target);
      var show = target.is("#sideBar") || 
                 target.is("#menuButton") || 
                 target.parent().is("#menuButton");
      if (!show) hideIt();
  });    
});

这是一个较短的版本

DEMO

function toggleIt(show) {
    if (show) {
        $('#sideBar').slideDown("slow");
        $('#menuButton').fadeOut();
    }    
    else {
        $('#sideBar').slideUp("fast");
        $('#menuButton').fadeIn();
  }
}    

$(document).scroll(function () {
    var y = $(this).scrollTop();
    toggleIt(y > 400);
});

$(function(){
    toggleIt($(document).scrollTop()<400);

    $('#menuButton').click(function(){
        $('#sideBar').slideDown();
    });
    $(document).on("click",function(e) {
      var target = $(e.target);
      var show = target.is("#sideBar") || 
                 target.is("#menuButton") || 
                 target.parent().is("#menuButton");
      if (!show) toggleIt(false);
    });    
});

Answer 4

一个孩子，@ mplungjan和@Gagan Jaura的回应似乎完成了这项工作：

function hideIt() {
    $('#sideBar').slideUp("fast");
    $('#menuButton').fadeIn();

}

function showIt() {
    $('#sideBar').slideDown("slow");
    $('#menuButton').fadeOut();
}

$(document).scroll(function () {
var y = $(this).scrollTop();

if (y > 400) {
        hideIt()
    } else {
        showIt();
    }
});

$(function(){
showIt(); // show at start

$('#menuButton').click(function(){
    $('#sideBar').slideDown();
});
$(document).on("click",function(e) {
      var target = $(e.target);
      var show = target.is("#sideBar") ||
                 target.is("#menuButton") ||
                 target.parent().is("#menuButton");
      if (!show) hideIt();
  });
});

$(document).ready(function(){
    $(document).trigger('scroll');
    $('#menuButton').click(function(){
    $('#sideBar').slideDown();
})

$('#content').click(function(){
        $('#sideBar').slideUp();
    })
});

jQuery菜单需要额外的功能

4 个答案: