Question

我会保持这么简单，因为它很简单。

所以我有一个我正在使用for tesmonials的页面，我设法为每一个添加一个更多的读取功能，我想保持页面干净整洁......

阅读更多功能有效，但继续我的问题。因为我每次点击1次大约有10个箴言阅读更多，所有10个帖子同时扩展..有什么帮助吗？

继承HTML代码

<p>something something something first</p>
<div style="width: 500px; padding: 10px;">
<br/><br/><a href="#" class="readMore">Read More</a>? <br/><br/>
<!-- BEGIN: Hidden Content. -->
<div class="content" style="display: none ; width:500px;">things things and stuff and more stuff and things </p></div>
<!-- END: Hidden Content. -->

这是脚本

<script type="text/javascript" src="./jquery-1.6.3.js"></script>
<script type="text/javascript">
    // Cache a reference to the hidden content.
    var hiddenContent = $("div.content");

    // Bind to the Read More link to toggle the
    $("a.readMore").click(

    function(event) {
        // Cancel the default event (this isn't a real link).
        event.preventDefault();
        // Check to see if the content is visible.
        if (hiddenContent.is(":visible")) {
            // Hide it slowly.
            hiddenContent.slideUp(3000);
        } else {
            // Show it slowly.
            hiddenContent.slideDown(3000);
        }
    });
</script>

任何帮助都会很棒..再次问题它（它的工作原理）但是当点击一个 - 更多 - 点击时，所有其他10个帖子也会扩展。

Answer 1

你那里有一些格式错误的HTML，而且Jquery也不正确。

首先通过删除错误的</p>标记并在适当的位置添加结束</div>标记来更正HTML。所有这些<br />标签都是不好的做法。如果你想要间距，可以在锚标记中添加CSS填充，而不是添加一堆破坏标记。

<p> something something something first</p>
<div style="width: 500px ;padding: 10px ;">
<a href="#" class="readMore">Read More</a>?

<div class="content" style="display: none ; width:500px;">things things and stuff and more stuff and things</div>
</div>

接下来，您需要定位与其前面的链接相关的隐藏div。为此，您需要在jquery函数中移动var声明。

$( "a.readMore" ).click( function( event ){
event.preventDefault();
var hiddenContent = $(this).next(".content");

if (hiddenContent.is( ":visible" )){
    hiddenContent.slideUp(300);
} else {
    hiddenContent.slideDown(300);
} 
});

我已经设置了WORKING DEMO供您查看。

阅读更多bug全部展开时点击

1 个答案: