一起解决这些 jquery 问题

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 attruused 附加的处理程序即可。您只需要一个功能

$('.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 属性，并像从text0click中更改 ID 一样更改 ID，以便像your-btn-id+div一样实现像mens_scroll_div一样更有意义的 smth。你在小提琴中看到的其余部分