更改 .slideToggle() 上的图像并防止打开 div 自行关闭

Question

目前，我创建了一个 slideToggle() 脚本，专注于三个独立的 div。 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

为了体验更改状态的后果，您应该使用切换函数的回调。让我们以第二个按钮为例：

问题 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： 要检查按钮的状态以避免 "double toggle" 效果，您可以执行如下检查：

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

希望这个回答对您有所帮助 ;)

更改 .slideToggle() 上的图像并防止打开 div 自行关闭

Change image on .slideToggle() and preventing open div closing itself

javascript

jquery

slidetoggle