Question

我想我有一个简单的问题。

我正在尝试使用.toggle创建一个简单的展开和折叠面板。

虽然内容按预期扩展和折叠，但我试图放置一些图标来帮助用户，我也无法切换这些图像。

HTML：

<div class="toggle_head Header">
    <label>
        <img height="30px"; src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" />
    </label>
    <label class="hide">
        <img height="30px"; src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" />
    </label>
    <label>Expand</label>
</div>
<div class="toggle_body">
    <label>My content</label>
</div>

jQuery的：

$(".toggle_body").hide();
$(".collapse").hide();

$(".toggle_head").click(function () {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.children('img').toggle();            
    });
});

CSS：

.Header {
    background: #DADADA;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #DADADA), color-stop(100%, #DADADA));
    background-image: -webkit-linear-gradient(#DADADA, #DADADA);
    background-image: -moz-linear-gradient(#DADADA, #DADADA);
    background-image: -o-linear-gradient(#DADADA, #DADADA);
    background-image: linear-gradient(#DADADA, #DADADA);
    color: #5C5C5C;
    height: 45px;
}
.hide {
    display: none;
}

这是我的小提琴：http://jsfiddle.net/oampz/2ZP9v/3/

任何帮助表示感谢。

由于

Answer 1

img不是.toggle_head的直接后代，为此目的使用find代替：

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

代码：

$(".toggle_body").hide();
$(".collapse").hide();

$(".toggle_head").click(function () {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.find('img').toggle();
    });
});

演示：http://jsfiddle.net/2ZP9v/4/

Answer 2

-------- JQuery代码---------

<script type="text/javascript">
$(document).ready(function () {

     $(".toggle_body").hide();
    $(".collapse").hide();


    $(".toggle_head").click(function () {
        var $this = $(this);
        $this.next(".toggle_body").slideToggle("slow", function () {
            $this.find('img').toggle();
        });
    });

 });

</script>

----------- UI代码----------------

<div class="toggle_head Header">
    <label>
        <img height="30px" src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" />
    </label>
    <label>
        <img class="hide" height="30px" src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" />
    </label>
    <label>Expand</label>
</div>
<div class="toggle_body">
    <label>My content</label>
</div>

jQuery在标签内切换img

2 个答案: