jQuery 在标签内切换 img答案

【问题标题】：jQuery Toggle img inside a labeljQuery 在标签内切换 img
【发布时间】：2014-03-24 10:36:36
【问题描述】：

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

我正在尝试使用 .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/

任何帮助表示赞赏。

谢谢

【问题讨论】：

标签： jquery css html toggle

【解决方案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/

【讨论】：

谢谢！这样就解决了！如果我有像jsfiddle.net/oampz/2ZP9v/8 这样的问号，我可以阻止它在点击时消失吗？
@OamPsy 只需将一个类添加到展开/折叠图标并在您的选择器中使用它们，例如：jsfiddle.net/2ZP9v/9

【解决方案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>

-----------用户界面代码----

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

【讨论】：