仅将jquery函数应用于当前div

我发现jquery代码可以完成我所需要的功能——水平滚动div

所以我有几个div，每个div都包含scrollpane scroll，我试图实现的是在用户单击div后使其滚动。以下是我目前掌握的代码：

    $(document).ready(function() {

        $('.section').click(function(event) {    

            $('.section').css('border', '1px solid #dfdfdf');
            $('.section').find('.jspDrag').css('display', 'none');
            $('.section').removeClass('active');            
            $(this).addClass('active');

            if ($('.section').hasClass('active')) {

            $(this).find('.scroll-pane').each(function() {

                var scrollPane = $(this).jScrollPane();
                var api = scrollPane.data('jsp'); 

                scrollPane.bind( 
                    'mousewheel',
                    function (event, delta, deltaX) 
                    { 
                        api.scrollByX(delta*-50);
                        return false;
                    }); 
            });    
        };

            $(this).css('border', '1px solid #4ea0dc');
            $(this).find('.jspDrag').css('display', 'initial');
            event.stopPropagation();    
        });

        $('body').on('click', function(event) {    

            $('.section').css('border', '1px solid #dfdfdf');
            $('.section').removeClass('active');
            $(this).find('.scroll-pane').css('display', 'block');
            $(this).find('.jspDrag').css('display', 'none');

        });
    });

找到的jquery脚本放在hasClass'active'部分的后面

代码工作得几乎完美，除了在点击另一个div之后，尽管滚动条从上一个中消失，用户仍然可以滚动它和当前选择的内容。每点击一个div，当鼠标悬停在上面时，用户就可以滚动所有以前选择的div。这不是我需要的，我只希望当前选择的div是可滚动的。如果类“active”使代码更轻，则不需要添加它

我怀疑它可能与每一部分都有关系，但不知道如何修复它

---

有人可以帮忙吗？

插件有销毁方法吗？如果是这样，请使用它来销毁以前的初始化。虽然是销毁，但它似乎在做其他事情，即从滚动条中删除样式。我仍然怀疑。每一部分，我如何为特定的div设置它？如果你在jsfiddle.net中创建一个演示。不清楚您到底想要什么行为，或者当前正在发生什么，但是涉及到许多外部文件。我真的想让鼠标在单击div时水平滚动，而当在该div外单击时，水平滚动就不可能了。当前，功能性被添加到每个单击的div中，而没有将其从上一个div中删除。