-1

我是 jquery 的新手，请帮我解决这个问题我有一个带有 5Headers 的手风琴，使用 JQuery 点击即可打开。我添加了图像以在单击标题时显示 + 和 - 图像。这很好用，但我也一样

类名相同，它将所有图像设置为 + 或 -

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".content1").hide();

            jQuery("#head1").click(function () {

                jQuery(this).next(".content1").slideToggle(600);

                if ($("#img1").attr('src') == "Images/minus.png") {
                    jQuery("#img1").attr('src', "Images/plus.gif");
                }
                else {
                    jQuery("#img1").attr('src', "Images/minus.png");
                }

                jQuery("#head2").click(function () {

                    jQuery(this).next(".content1").slideToggle(600);

                    if ($("#img2").attr('src') == "Images/minus.png") {
                        jQuery("#img2").attr('src', "Images/plus.gif");
                    }
                    else {
                        jQuery("#img2").attr('src', "Images/minus.png");
                    }

                if ($("#img2").attr('src') == "Images/minus.png") {
                    jQuery("#img2").attr('src', "Images/plus.gif");
                }
                else {
                    jQuery("#img2").attr('src', "Images/minus.png");
                }


                if ($("#img3").attr('src') == "Images/minus.png") {
                    jQuery("#img3").attr('src', "Images/plus.gif");
                }
                else {
                    jQuery("#img3").attr('src', "Images/minus.png");
                }

                if ($("#img4").attr('src') == "Images/minus.png") {
                    jQuery("#img4").attr('src', "Images/plus.gif");
                }
                else {
                    jQuery("#img4").attr('src', "Images/minus.png");
                }

            });
        });
    </script>

 .heading1
        {
            margin: 1px;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            position: inherit;
            background-color: rgba(25, 130, 209, 0.7);
            background-color: rgb(25, 130, 209);
            padding-left: 10px;
            color: #F4F4F4;
            font-size: 1.3em;
            font-weight: 400;
            padding: 1%;

        }

.content1
        {
            padding: 5px 10px;
            background-color: #fafafa;
            z-index:3;
        }

 <p class="heading1" id="head1">
            <img class="imageToggle" id="img1" src="Images/plus.gif" height="20px" width="20px" /> Evidence-Based Practices.</p>
        <div class="content1">
            A wide variety of interventions are available for addressing behavioral
<div>

<p class="heading1" id="head2"><img class="imageToggle" id="img2" src="Images/plus.gif" height="20px" width="20px" />Improving Lives, Not Just Behavior.</p>
        <div class="content1">
            Although reducing behavioral 
<div>

请给我一些想法？

4

1 回答 1

0

您的标记无效，您有未关闭的 div 元素，也 p用作按钮不是语义的，您可以用a元素替换它们。

$(document).ready(function () {
    $(".content1").hide();
    $(".heading1").click(function (e) {
        // e.preventDefault // in case that you are using `a` element
        $(this).next(".content1").slideToggle(600);
        $('img', this).prop('src', function(i, src){
            return src === 'Images/minus.png' ? 'Images/plus.gif' : 'Images/minus.png';
        });
    });
});
于 2013-02-07T09:42:32.447 回答