Question

所以我有一个我正在研究的项目，我的切换功能无效。有人能告诉我什么是错的吗？

$('.col1-text').click(function() {
    $(this).find('.col1-info').toggle(function() {
        $(this).hide('slow');
        $('img.toggle').attr('src','http://localhost/balisouladventures/images/col1-closed.png');
    },function() {
        $(this).show('slow');
        $('img.toggle').attr('src','http://localhost/balisouladventures/images/col1-open.png');
    });
});

我的HTML：

            <div class="col1-text">
                <h5><a href="javascript:void(0);"><img src="images/col1-open.png" width="17" height="9" alt="" /> Living Your Spiritual Connection</a></h5>
                <div class="col1-info">
                    <img class="thumb" src="images/col1-thumb.png" width="77" height="77" alt="" />
                    <ul>
                        <li>Malesuada fames ac</li>
                        <li>turpis habitant morbi</li>
                        <li>tristique senectus et netus</li>
                        <li>et malesuada fames ac</li>
                        <li>turpis et malesuada fames</li>
                    </ul>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac</p> <div class="clear"></div>
                </div>
                <img class="spacer" src="images/main-listspacer.png" width="310" height="2" alt="" />
            </div>

Answer 1

好吧，您将两次点击事件（.toggle()）绑定到.col1-info元素，每次点击元素.col1-text。这真的很有意义，我想这就是你的问题所在。

您可能应该使用.live()将这些点击处理程序与.ready()处理程序中的某个位置绑定。

$(function() {
    $('div.col1-text').live('click', function() {
        var $self = $(this),
            $info = $self.find('div.col1-info'),
            $img  = $self.find('img.toggle');

        if( $info.is(':hidden') ) {
            $info.show('slow');
            $img.attr('src','http://localhost/balisouladventures/images/col1-closed.png');

        }
        else {
            $info.hide('slow');
            $img.attr('src','http://localhost/balisouladventures/images/col1-closed.png');
        }
    });
});

您需要为class="toggle"标记中的<img>设置<h5>才能使其发挥作用。

这里有一个略微修改过的版本：http://www.jsfiddle.net/MQsbS/

为什么我的切换不起作用？ jQuery的

1 个答案: