Question

这是我的代码

JQUERY

//Hide/Show Audio Player
$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
    });
});

这是我的HTML

<div id="hs-nav">
    <a href="#" ><img src="images/left-arrow.png" width="20" height="20" alt=""></a>
</div>

我希望切换按钮在单击时适当地在左箭头和右箭头之间切换。我到处寻找，任何帮助都会受到赞赏！

我试过这个，但它不起作用

$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
        document.getElementById("hs-nav").addClass("right-arrow");
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
        document.getElementById("hs-nav").removeClass("right-arrow");
    });
});

Answer 1

我不知道左侧定位是做什么的，但是如果您在点击按钮时尝试用右箭头图像交换左箭头图像，它应该看起来像这样：

$(document).ready(function() {
    $("#hs-nav").on('click', function() {
        $(this).find('img').prop('src', function(_,source) {
            return source.indexOf('left-arrow') != -1 ? 
                   source.replace('left-arrow', 'right-arrow'): 
                   source.replace('right-arrow', 'left-arrow');
        });
    });
    $("#nav-column").toggle();
});

Answer 2

得到了解决方案

//Hide/Show Audio Player
$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
        $("#hs-nav").addClass("right-arrow");
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
        $("#hs-nav").removeClass("right-arrow");
    });
});

切换按钮和图像切换

2 个答案: