2

我有这段 HTML：

        <div class="clearfix wanted_item">
            <div class="clearfix">
                <div class="float_right"><img src="images/pin.png"></div>
                <div class="float_right">
                    <h3>a</h3>
                    <div>abcd</div>
                </div>
            </div>
            <div class="float_right more_details" style="display: block;">
                                    <ul>
                    <li>some list</li>                  </ul>
                <div class="application_link">                      
                    <a class="orange_button" href="volunteer.php?volunteer_type=1"><span>apply</span></a>  
                </div>
            </div>
            <a class="float_left clearfix more_details_link" href="javascript:void(0);">Show details</a>
        </div>

我有这个 jQuery 代码：

$(".less_details_link").click(function() {
    $(this).parent().children(".more_details").slideUp(500);
    $(this).text("Show details");
    $(this).removeClass('less_details_link');
    $(this).addClass('more_details_link');
});
$(".more_details_link").click(function() {
    $(this).parent().children(".more_details").slideDown(500);
    $(this).text("Hide details");
    $(this).removeClass('more_details_link');
    $(this).addClass('less_details_link');
});

出于某种原因，当我单击“显示”链接时它可以正常工作，我还可以看到它将类更改为less_details_link但第二个click()函数无法工作，没有任何输出到控制台日志。当我单击“隐藏详细信息”链接时，它什么也不做。

4

3 回答 3

3

jsFiddle Demo

那是因为当你向一个元素添加一个类时，它并不会带来事件处理程序，除非你使用 on ( jQuery API: on ) 作为事件处理程序

$("body").on("click",".less_details_link",function() {
 $(this).parent().children(".more_details").slideUp(500);
 $(this).text("Show details");
 $(this).removeClass('less_details_link');
 $(this).addClass('more_details_link');
});
$("body").on("click",".more_details_link",function() {
 $(this).parent().children(".more_details").slideDown(500);
 $(this).text("Hide details");
 $(this).removeClass('more_details_link');
 $(this).addClass('less_details_link');
});
于 2013-04-25T21:32:37.237 回答
1

这比它需要的复杂得多。它的一个链接，只需给它一个额外的类来表示是否扩展，然后执行一个简单的 if 函数来确定是否处于活动状态。

感谢@Kacey 的.slideToggle()推荐.toggleClass()，甚至更简单。

$(".more_details_link").click(function() {
    var $this = $(this);

    $this
        .toggleClass('active')
        .prev()
        .stop()
        .slideToggle(500);

    $this.hasClass('active') ? $this.text("Show details") : $this.text("Hide details");
});

编辑为对文本使用三元 if 函数。

于 2013-04-25T21:32:49.840 回答
-1

当您的 jQuery 加载时，没有.less_details_link可用的，因此它无法将.click()函数挂钩到它。你想要做的是像这样设置你的功能：

$(".less_details_link").on("click", function() { ... }
$(".more_details_link").on("click", function() { ... }
于 2013-04-25T21:32:55.300 回答