Question

我有以下div，它是隐藏的：

<div class="showDescription 73" style="display:none;">blah blah blah</div>

然后站在它旁边：

<div class="more" divtoshow="73" style="cursor:pointer">more...</div>

我想点击课程more的div，然后显示隐藏的div，然后更改单词more... to less...，删除课程more，添加课程{ {1}}所以再次点击它会再次隐藏div。简单的东西。它变成了这个：

canHide

当我单击更多单词时，隐藏的div显示并添加了一个类<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>，但再次点击它时没有任何反应，我不知道为什么。

JQuery - 此部分可以正常工作：

canHide

这部分什么都不做？

$('.more').click(function() { // show hidden div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeIn();
    $(this).removeClass('more');
    $(this).addClass('canHide');
    $(this).html('less...');
});

这是一个fiddle

Answer 1

您正在更改类，因此处理程序（在运行时绑定）不知道该新类存在。使用事件委托：

$(document).on('click', '.canHide', function() { // hide shown div

});

document应该是包含.canHide类元素的元素，并且在运行时存在，但由于我看不到您的HTML，document是一个安全的赌注。

Answer 2

这可能会更容易

$('.more').click(function() { 
    // show/hide element before .more && toggle text
    $(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});

它还删除了more链接和content之间的相应属性，因为它使它们变得不必要。 即divtoshow / 73级

做了一个小提琴：http://jsfiddle.net/filever10/zXz3c/

更新：这里的每一件细分

$('.more').click(function() {
    // get element
    $(this)
    //if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
    .html($(this).html()=='▼'?'▲':'▼')
    //get previous element by class
    .prev('.showDescription')
    //clear its queue to prevent buildup
    .stop()
    //fadeIn if it's hidden or fadeOut if it's visible
    .fadeToggle();
});

JQuery - 单击以显示div然后再次隐藏

2 个答案: