-1

私はjqueryを初めて使用しています。この問題を解決するのを手伝ってください。JQueryを使用してクリックすると開く5Headersのアコーディオンがあります。ヘッダーをクリックすると + と - の画像を表示する画像を追加しました。これはうまくいきますが、私は同じです

クラス名は同じで、すべての画像を + または - に設定します

<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 に答える