我刚开始编写JQuery,但是我的toggleClass函数有问题。我编写了一个简单的函数,可以在选择元素时更改其样式。然后,当选择另一个元素时,将样式从上一个元素中删除并放置在新元素上。可以了我的问题是,当您第二次单击当前具有样式的元素时,不会删除样式。我希望在第二次单击元素时删除样式。我粘贴了以下代码,但是您可以在jsfiddle中看到一个有效的示例:
http://jsfiddle.net/Ana32/pumyjgev/

谢谢!

的HTML

<div class="portfolio">


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc4">
                    </div>


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc5">
                    </div>

                    <div class="portfoliowork photochange">
                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc6">
                    </div>

                    <div class="whowearetext toggledesc toggledesc4">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>

                <div class="whowearetext toggledesc toggledesc5">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>


                    <div class="whowearetext toggledesc toggledesc6">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>
                        </div>


的CSS

.photochange h4{
    display:none;
}

.teamchange h4{
    display:block;
    z-index: 50;
    float: left;
    position: absolute;
}


.teamchange img{
z-index: -10;
    border:5px solid #7bc32b;
}


JS

    $('.stylingchange').click(function(){
    $('.wwaiconchange').removeClass('wwaiconchange');
    $(this).toggleClass('wwaiconchange');
})



    $('.photochange').click(function(){
        $('.teamchange').removeClass('teamchange');
        $(this).toggleClass('teamchange');

    });


$('img[data-char=togglephoto1]')
    $(function(){
        $('.toggledesc').hide();

        $('.togglephoto').on('click', function(){
            var toggleid = $(this).attr('data-toggleid');
            $('.toggledesc').not('.' +toggleid).slideUp("slow");
            $('.' +toggleid).slideToggle("slow");
        });

    });

最佳答案

问题是.photochange单击处理程序中的逻辑。首先,从所有元素中删除该类,然后将其重新打开以使其被单击。这意味着被点击的对象只能处于“开启”状态。

而是在clicked元素上切换类,但只能将其从该元素的siblings()中删除​​:

$('.photochange').click(function () {
    $(this).toggleClass('teamchange').siblings().removeClass('teamchange');
});


Updated fiddle

还要注意,由于您创建了一个未使用的jQuery对象并具有嵌套的DOMReady处理程序,因此我在提琴小提琴中整理了您的代码。

关于jquery - 再次单击元素时关闭toggleClass,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31031849/

10-12 12:52
查看更多