显示/隐藏不正常？

Question

我有这个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()函数无法正常工作而没有任何输出控制台日志。当我点击“隐藏详细信息”链接时，它就没有做任何事情。

Answer 1

的 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');
});

Answer 2

这比它需要的更复杂。它的一个链接，只是给它一个额外的类来表示是否扩展，然后做一个简单的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文本功能。

Answer 3

当你的jQuery加载时，没有.less_details_link可用，所以它不能将.click()函数挂钩到它。你想要做的是如下设置你的功能：

$(".less_details_link").on("click", function() { ... }
$(".more_details_link").on("click", function() { ... }