Question

我有一个适用于滑块的脚本。但现在我需要使用HTML旋转箭头图像：

我正在使用的图片目前是班级byline的背景图片。

jQuery脚本在这里：

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        //$(this).attr("id", "down-arrow");
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        //$next.attr("id", "");
    });
});

这可以将图像从左向下更改，例如，id从空更改为down-arrow。但是当我单击以关闭滑块时，图像保持为左侧。我对如何重新编写此脚本以更改图像感到困惑。目前图像是分开的，一个朝左，另一个朝下。我应该使用单个图像精灵，但我只是想先把它弄清楚。

我读过这篇文章，这是一个好主意，但对我来说可能有点太复杂了：

Rotate image on toggle with jQuery

感谢。

修改

我应该注意到，我在这里讨论的页面与我展示的小提琴有点不同：

<div class="byline">
    <h4 class="crp-h">Analyze</h4>
    <p class="crp-p">Things are written here</p>
</div>

<div class="toggle-content">
    <ul class="crp-list">
        <li>Statistical</li>
        <li>Robust</li>
    </ul>
</div>

谢谢One Trick Pony ......除了一件事，这件事几乎可以工作。旋转仅在单击this div时有效。点击non-this div时隐藏其他div，但图片仍未展开：

.byline{
  position:relative;     /* required */
}    


.byline:after {
    transform: rotate(-90deg);
    content: '';           /* required */
    position:absolute;     /* required */
    width: 14px;           /* required, width of your arrow */
    height: 14px;          /* required, height of your arrow */
    right: -20px;          /* required, negative width + some padding */
    top:0;                 /* required */
    background: url('your/arrow/image/here.png') no-repeat;
}

.byline.exp:after {
    transform: rotate(0deg);
}

新的jQuery在这里：

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        $(this).toggleClass('exp');
    });
});

显示这一点的小提琴在这里：

http://jsfiddle.net/nicorellius/7AYjj/

Answer 1

根据您在触发链接上切换的类，将箭头图形放在像:after，and transform it这样的伪元素上：

.byline:after{
    transform: rotate(-90deg);
    /* arrow as background here */
}

.byline.exp:after{
    transform: rotate(0deg);
}

点击事件中的

添加：

$(this).toggleClass('exp');

在Toggle上旋转箭头图像隐藏Div jQuery脚本

1 个答案: