Question

目前，我已经创建了一个slideToggle()脚本，专注于三个独立的div。 div 2在开始时打开，三个按钮可以分别切换每个div。您可以在下面进一步查看我的代码，了解我的意思。

现在，我想弄清楚一些我似乎无法完成的事情。

1）当div打开时，我试图将按钮图像更改为橙色（其他）图像按钮。当div处于活动状态时，有没有办法使图像不同？

2）首次加载脚本时，第二个div处于活动状态。然而，当您单击第二个按钮时，它会一起关闭所有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：要检查按钮的状态以避免“双切换”效果，您可以执行以下检查：

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

希望这个答案有用;）

更改.slideToggle（）上的图像并阻止打开div关闭本身

1 个答案: