切换滑块按钮图像恢复正常

Question

我有 2 个图像作为一个按钮，它可以改变一个人是点击打开还是关闭滑块，我还有一个 stopPropagation 事件，如果我点击 div(slider) 之外的任何地方，它会关闭滑块

我现在想要的是让图像恢复正常（到显示为按钮的第一个图像），如果一个人在 div 之外点击，如果他们再次点击按钮关闭，同样的方式，因为如果我通过单击按钮打开滑块，然后在 div 外部单击以将其关闭，图像不会更改。这是我的代码：http://jsfiddle.net/v0yfb72v/

jQquery：

$('#toggle-onoff-network').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'http://www.pulseframe.com/images/Button-on.png') src = 'http://www.pulseframe.com/images/Button-off.png';
    if (origsrc == 'http://www.pulseframe.com/images/Button-off.png') src = 'http://www.pulseframe.com/images/Button-on.png';
    jQuery(this).attr('src', src);
    }
});

// The script
$(document).ready(function(){
    $('#netywork-toggle').click(function(event){
        event.stopPropagation();
         $("#voyaflex-container").slideToggle("fast");
    });
    $("#voyaflex-container").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $("#voyaflex-container").hide();
});

Answer 1

更新您的文档点击事件以触发按钮的点击事件。它将为您切换按钮并关闭滑块：

$(document).on("click", function () {
    if($("#voyaflex-container").css('display') !== 'none')
    {
        $('#toggle-onoff-network').click();
    }
});

小提琴：http://jsfiddle.net/6xezqh7e/

Answer 2

您也可以在单击文档时添加相同的操作，而不是隐藏切换部分，例如：

// Change toggle when clicked
$('#toggle-onoff-network').on({
  'click': function() {
    var origsrc = $(this).attr('src');
    var src = '';
    if (origsrc == 'http://www.pulseframe.com/images/Button-on.png') src = 'http://www.pulseframe.com/images/Button-off.png';
    if (origsrc == 'http://www.pulseframe.com/images/Button-off.png') src = 'http://www.pulseframe.com/images/Button-on.png';
    jQuery(this).attr('src', src);
  }
});


// The script
$(document).ready(function() {
  $('#netywork-toggle').click(function(event) {
    event.stopPropagation();
    $("#voyaflex-container").slideToggle("fast");
  });
  $("#voyaflex-container").on("click", function(event) {
    event.stopPropagation();
  });
});

$(document).on("click", function() {
  $("#voyaflex-container").toggle();
  
  //add this part of code
  var origsrc = $('#toggle-onoff-network').attr('src');
  var src = '';

  if (origsrc == 'http://www.pulseframe.com/images/Button-on.png') src = 'http://www.pulseframe.com/images/Button-off.png';
  if (origsrc == 'http://www.pulseframe.com/images/Button-off.png') src = 'http://www.pulseframe.com/images/Button-on.png';
  $('#toggle-onoff-network').attr('src', src);

});

#netywork-toggle {
  background: #000;
  padding: 5px;
}
#voyaflex-container {
  background: #E5980C;
}
#netywork-toggle img {
  max-height: 25px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
  #voyaflex-container {
    display: none
  }
</style>
<div id="netywork-toggle">
  <img id="toggle-onoff-network" src="http://www.pulseframe.com/images/Button-on.png" width="auto" height="34" />
</div>
<div id="voyaflex-container">
  <!-- social share buttons -->
  <ul class="crafty-social-buttons-list">
    <li>
      <a href="#" target="_blank">
        <img title="Pulseframe Code" alt="Facebook" width="38" height="38" src="facebook.png">
      </a>
    </li>
    <li>
      <a href="#" target="_blank">
        <img title="Pulseframe Geek" alt="twitter" width="38" height="38" src="facebook.png">
      </a>
    </li>
    <li>
      <a href="#" target="_blank">
        <img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png">
      </a>
    </li>
    <li>
      <a href="#" target="_blank">
        <img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png">
      </a>
    </li>
  </ul>
</div>

Answer 3

只需将您的点击包装在一个函数中。

function ChangeImage() {
    var origsrc = $('#toggle-onoff-network').attr("src");
    var src = '';
     if (origsrc == 'http://www.pulseframe.com/images/Button-on.png') src = 'http://www.pulseframe.com/images/Button-off.png';
    if (origsrc == 'http://www.pulseframe.com/images/Button-off.png') src = 'http://www.pulseframe.com/images/Button-on.png';
    jQuery(this).attr('src', src);

}

$('#toggle-onoff-network').on({
  'click': function() {
      ChangeImage();
 }
});

$(document).on("click", function () {
    $("#voyaflex-container").hide();
    ChangeImage();
});