0

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

所以我有一个页面用于 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 个帖子也会展开。

4

1 回答 1

0

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

首先通过删除 errant标签并在适当的地方</p>添加一个结束标签来更正 HTML。</div>所有这些<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供您查看。

于 2013-03-31T08:09:08.537 回答