在.slideToggle（）上更改图像，并防止打开div关闭自身

Question

当前，我已经针对三个单独的div创建了slideToggle()脚本。 div 2开始时是打开的，三个按钮可以分别切换每个div。 您可以在下面进一步检查我的代码，以了解我的意思。

现在，我试图找出一些我似乎无法完成的事情。

1）我试图在div打开时将按钮图像更改为橙色（其他）图像按钮。 div启用时，有什么方法可以使图像不同？

2）第一次加载脚本时，第二个div处于活动状态。 但是，当您单击第二个按钮时，它会同时关闭所有div。 有没有一种方法可以确保在按钮的相关div已经打开时，确保它保持打开状态。 这意味着，如果我单击一个已经激活的div的按钮，则什么也不会发生，但是如果我单击其他按钮之一，它将关闭另一个激活的div并切换另一个。

我希望我能正确解释。 我看到这里有更多人遇到类似的问题，因此也许一些更专业的编码人员可以帮助我们。 先感谢您。

这是我的代码：

https://jsfiddle.net/7xanx1tc/

 jQuery(document).ready(function($) { //Start of Jquery $('.button1').click(function() { $('.developers').slideUp(); $('.lockedin').slideUp(); $('.product').slideToggle('slow'); }); $('.button2').click(function() { $('.product').slideUp(); $('.developers').slideUp(); $('.lockedin').slideToggle('slow'); }); $('.button3').click(function() { $('.product').slideUp(); $('.lockedin').slideUp(); $('.developers').slideToggle('slow'); }); // End of Jquery }); 

 .product { display: none; } .developers { display: none; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <h3> <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand" /> </h3> <h3> <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand" /> </h3> <h3> <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand" /> </h3> <div class="product"> Testdiv1 </div> <div class="lockedin"> Testdiv2 </div> <div class="developers"> Testdiv3 </div> 

Answer 1

为了发挥改变状态的后果，您应该使用toggle函数的回调。 让我们以第二个按钮为例：

问题1：如果要在单击第一个按钮后显示其他按钮：

$('.button2').click(function(){
    $('.product').slideUp();
    $('.developers').slideUp();
    $('.lockedin').slideToggle('slow', function () {
        $('.button2').hide();
        $('.orange-button').show();
    });   
});
// Remember .orange-button should work similar to .button2

问题2：要检查按钮的状态以避免“双重切换”效果，可以执行如下检查：

$('.button2').click(function(){
    if ($('.lockedin').css('display') === 'none') {
        $('.lockedin').slideToggle('slow');
    }
    $('.product').slideUp();
    $('.developers').slideUp();   
});

希望这个答案有帮助;）