Question

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

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

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

$(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'类的元素并将它们向下滑动。”< / p>

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

Here is a repaired 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()。

，而不是添加和删除班级名称

Demo

Jquery在父div中打开和关闭

2 个答案: