Jquery在父div中打开和关闭

Question

标题并没有很好地解释，基本上我有8个相同的div，与css样式相同的类。

它们都有隐藏的内容，我希望一次只展开一个div而不使用每个div和隐藏内容的不同类或标识符。

我试图在Jsfidle上使用两个相同的div来显示它，但是由于某种原因我甚至无法在jsfiddle上触发它

http://jsfiddle.net/dAXJ2/8/

$(document).on('click',".servicereadmore",function() {
    //var x = $(this).closest('div').attr('class') 
    //$('.hiddenservices').parent(x).slideDown(1000);    
    $('.hiddenservices').slideDown(1000);
    $(this).html("Read less");
    $(this).removeClass("servicereadmore");
    $(this).addClass("servicereadless");
});

$(document).on('click', ".servicereadless" ,function() {
    $('.hiddenservices').slideUp(1000);
    $(this).html("Read more");
    $(this).removeClass("servicereadless");
    $(this).addClass("servicereadmore");
});

目前在上面工作，但打开所有隐藏的文本，评论是我一直试图只在我按下的按钮的父div内展开

Answer 1

你的可点击的<a>标签可能应该是按钮，因为这是他们所处的角色。此外，你的功能目前无法正常工作，因为你已添加

return false;

作为每个人的第一个陈述。 这可以防止之后的任何代码运行。 而不是将这些<a>链接更改为<button type=button>或者向处理程序添加参数（“e”或“event”）并调用

e.preventDefault();

在处理程序中。

要仅影响与“阅读更多”链接相关的页面部分，您只需要导航DOM：

$(this).closest('.myinfo').find('.hiddenservices').slideDown(1000);

这意味着：“从点击的元素开始，爬上DOM以找到与'myinfo'类最接近的元素，然后从那一点下来找到所有带有'hiddenservices'类的元素并将它们向下滑动。”

还有其他一些问题：你需要将隐藏的“hiddenservices”部分启动，或者以某种方式不可见。 另外，你的jsfiddle的另一个问题是你没有选择jQuery。 通过检查错误控制台，您可以快速学习这些内容。

这是一个修复过的jsfiddle。

Answer 2

您不必为此目的使用那么多代码。 使用就像

$(document).on('click', ".servicereadmore", function (e) {
    e.preventDefault();
    if ($(this).parent().find('.hiddenservices').is(":visible")) {
        $(this).html("Read more");
    } else {
        $(this).html("Read less");
    }
    $(this).parent().find('.hiddenservices').slideToggle(1000);
});

您可以使用slideToggle()代替添加和删除类名。

演示