文章/答案/技术大牛

发布

社区首页 >问答首页 >如果元素不可见，请按住jQuery键单击幻灯片页面

问如果元素不可见，请按住jQuery键单击幻灯片页面
EN

Stack Overflow用户

提问于 2010-02-26 20:41:41

回答 2查看 2.5K关注 0票数 0

我有一个jQuery下拉菜单来显示一个高度为500px的div。问题是显示此div的链接位于页面折叠上方，淡入的下拉div显示在折叠下方。

我一直在试验scroll.to，如果新的div不在视图中，它会将页面下移(但如果它完全可见，就让用户留在原地)-遗憾的是，没有成功。

原始代码(运行良好，但可能可以简化)如下：

 // Homepage Theme Details Panel

 // Expand Panel

 $("#theme-1").click(function(){

   if ($("#theme-1-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-1-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-1').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-1-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-1').addClass('theme-active');
     return false;

    }

   } else { // theme-1-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-1-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-2").click(function(){

   if ($("#theme-2-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-2-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-2').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-2-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-2').addClass('theme-active');
     return false;

    }

   } else { // theme-2-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-2-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-3").click(function(){

   if ($("#theme-3-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-3-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-3').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-3-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-3').addClass('theme-active');
     return false;

    }

   } else { // theme-3-content is shown so close


    $("#theme-details-wrap").slideUp(1000);
    $("#theme-3-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-4").click(function(){

   if ($("#theme-4-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-4-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-4').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-4-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-4').addClass('theme-active');
     return false;

    }

   } else { // theme-4-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-4-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-5").click(function(){

   if ($("#theme-5-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-5-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-5').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-6-content").hide();

     $("#theme-5-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-5').addClass('theme-active');
     return false;

    }

   } else { // theme-5-content is shown so close


    $("#theme-details-wrap").slideUp(1000);
    $("#theme-5-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-6").click(function(){

   if ($("#theme-6-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-6-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-6').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();

     $("#theme-6-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-6').addClass('theme-active');
     return false;

    }

   } else { // theme-6-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-6-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 // Collapse Button
 $(".collapse").click(function(){

  $("#theme-details-wrap").slideUp(1000);

  $("#theme-1-content").fadeOut(1000);
  $("#theme-2-content").fadeOut(1000);
  $("#theme-3-content").fadeOut(1000);
  $("#theme-4-content").fadeOut(1000);
  $("#theme-5-content").fadeOut(1000);
  $("#theme-6-content").fadeOut(1000);

  $('#slider-content a').removeClass('theme-active');
 });

});

如果不在视图中，我如何添加代码来获得要显示的#主题-详细信息-包装div？

非常感谢，

詹姆斯

jquery

scroll

slider

回答 2

Stack Overflow用户

发布于 2010-02-26 20:55:32

你用什么插件来滚动浏览器窗口？

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

将浏览器窗口滚动到匹配元素的示例代码：

$.scrollTo('#theme-details-wrap');

如果您想在滚动窗口之前检查元素是否可见，请查看此线程中的代码：

Check if element is visible after scrolling

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

您可以修改最后一行中的条件，以确保元素完全可见-如果不是，则可以滚动浏览器窗口。

票数 2

Stack Overflow用户

发布于 2012-11-21 19:12:47

此函数：

    $.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
    }

如下所示：

$('#theme-details-wrap').scrollView();

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2341572

复制

相似问题

问如果元素不可见，请按住jQuery键单击幻灯片页面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果元素不可见，请按住jQuery键单击幻灯片页面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果元素不可见，请按住jQuery键单击幻灯片页面
EN