javascript - Jquery 在父 div 中打开和关闭

Question

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

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

我尝试使用两个相同的 div 在 Jsfidle 上显示它，但是由于某种原因我什至无法让它在 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”或“事件”)并调用

e.preventDefault();

在处理程序中。

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

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

这意味着:“从被单击的元素开始，爬上 DOM 以找到最接近的类为‘myinfo’的元素，然后从该点向下找到所有类为‘hiddenservices’的元素并将它们向下滑动。”

还有一些其他问题:您需要将“hiddenservices”部分启动为隐藏状态，或者以某种方式不可见。另外，您的 jsfiddle 的另一个问题是您没有选择 jQuery。只需检查错误控制台，您就可以快速了解这一点。

Here is a repaired jsfiddle.