切换滑块按钮图像回到正常

我有2个图像作为一个按钮，它会改变人是否点击打开或关闭滑块，我也有stopPropagation事件关闭滑块，如果我点击div（滑块外的任何地方）切换滑块按钮图像回到正常

我现在想要的是让图像恢复正常（第一个图像显示为一个按钮），如果一个人在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(); 
});

来源

2014-10-30 Cʜᴜɴ

更新您的文件点击事件触发按钮的点击事件。这将切换按钮和关闭滑盖为您提供：

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

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

来源

2014-10-30 18:10:24

这只是一个小问题...现在，滑块现在点击我在它外面点击任何地方 – 2014-10-30 18:31:25

我更新了我的答案。检查容器是否可见，如果是，则运行click事件。 – 2014-10-30 18:33:37

非常感谢，现在运行良好。 – 2014-10-30 18:34:57

您可以在文档单击也增加，而不是隐藏相同的动作进行切换，如部分：

// 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>

来源

2014-10-30 18:08:56 user2019037

只需换你点击一个功能。

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(); 
});

来源

2014-10-30 18:14:35

切换滑块按钮图像回到正常

回答

相关问题