Question

我有两个单独工作的脚本，但不能完全按照我想要的方式工作。

我有4个按钮和4个目标div（第一个div最初显示，另外3个是隐藏的），我要做的第一件事是点击4个按钮中的一个，它显示一个目标div并隐藏另一个3 div使用这个脚本：

// Toggle Divs
var currLayerId = "text0click";
function togLayer(id){
     if(currLayerId) setDisplay(currLayerId, "none");
     if(id)setDisplay(id, "block");
     currLayerId = id;
}

function setDisplay(id,value){
     var elm = document.getElementById(id);
     elm.style.display = value;
}

然后第二个是将屏幕向下滑动到刚刚使用此代码打开的目标div：

// Slide down function for four buttons
jQuery(document).ready(function(){
    var slidePosition = jQuery('#mens_section_link').offset().top;

    jQuery('#mens_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#womens_section_link').offset().top;

    jQuery('#womens_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#kids_section_link').offset().top;

    jQuery('#kids_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#equipment_section_link').offset().top;

    jQuery('#equipment_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

这两个脚本分别做了他们想要的太好了。然而，当我组合它们时，第一个脚本打开div的精细（很好）并滚动到第一个div（这是因为最初显示div），但是所有其他div（最初设置得太隐藏）都是相反的并且总是滚动到页面顶部。

带有两个脚本的代码的JSFiddle：http://jsfiddle.net/vpbuz106/

非常感谢任何帮助。

Answer 1

首先，不要将jQuery和纯javascript混合在一起，用它们之一做它，我的意思是 var elm = document.getElementById(id);或var elm = $('#elmId')，您已经通过两种不同的方式将2个处理程序附加到同一事件中，因此只需通过onclick attrubute附加的处理程序。您只需要一个功能

$('.layer-toggle').on('click', function(e){
    e.preventDefault();
    var $that = $(this);

    $('html,body').animate({
       scrollTop: $that.offset().top
    }, 'slow')

    if ($('.togglable-div:visible').length){
       $('.togglable-div:visible').hide();
       $('#' + $that.attr('id') + '_div').show();
    }
});

并从您的标记中移除onclick属性并将{ID}更改为text0click，然后将其更改为更有意义的your-btn-id+div，以实现类似mens_scroll_div的smth。您在fiddle

中看到的其余部分

解决这些jqueries协同工作

1 个答案: