Question

我有一个博客排序结构的页面，我将放置多个帖子。我面临的问题是试图只获得一个读取更多链接以扩展和折叠其他链接。我已经尝试了不同的jquery方法和多个html结构来实现这一点，但未能获得所需的结果。请让我知道如何解决这个问题。谢谢。网址： http://jsfiddle.net/DSbFc/

<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {

        $('.ReadMore').bind('click', function(e)
        {
            e.preventDefault();

            $('.hide').slideToggle(function()
            {

                $(this).closest('.readmore').find(".hide").toggle();

            });
        });
    });

</script>

<body>
    <div id="art-main">

        <article class="post">
            <table>
                <tr>
                    <td><a href="images/image.png" data-lightbox="width:260;height:280" title="image"><img src="images/image.png" width="260px" height="280px"/></a></td><td>
                    <br/>
                    <table>
                        <tr>
                            <td>No.</td><td>Description</td><td>Qty.</td>
                        </tr>
                        <tr>
                            <td>1</td><td> content</td><td> 1</td>
                        </tr>
                        <tr>
                            <td>2</td><td> content</td><td> 1</td>
                        </tr>
                        <tr>
                            <td>3</td><td> content</td><td> 1</td>
                        </tr>
                        <tr>
                            <td>4</td><td> content</td><td> 2</td>
                        </tr>
                        <tr>

                    </table>
                    <div class="ReadMore">
                        <a href="#" >Read More</a>
                    </div>
                    <div class="hide">
                        <table >

                            <tr >
                                <td>6</td><td> content</td><td> 1</td>
                            </tr>
                            <tr >
                                <td>7</td><td> content</td><td> 1</td>
                            </tr>
                            <tr >
                                <td>8</td><td> content</td><td> 1</td>
                            </tr>
                            <tr >
                                <td>9</td><td> content </td>
                            </tr>

                        </table>
                    </div>
                    <div class="hide">
                        text
                    </div></td>
                </tr>
    </div>
    </table>
    <br/>
    <br/>

    <table>
        <tr>
            <td><a href="images/image2.gif" data-lightbox="width:400;height:400" title="image2"><img src="images/image2.gif" width="260px" height="280px"/></a></td><td><b style="font-size:22px; color:#fff;">title</b>
            <br/>
            <b style="font-size:22px; color:#fff;">title</b>
            <br/>
            content
            <br/>
            <div class="ReadMore">
                <a href="#" >Read More</a>
            </div>
            <div class="hide">
                content
                <br/>

                <br/>
                •   content
                <br/>
                •   content
                <br/>
                •   content
                <br/>
                <br/>

                </article>
            </div> </div>
            </div>
            </div>
            </div>
</body>

Answer 1

我修复了你的代码。 here is LIVE DEMO ....但是，我建议您使用带有position: absolute;值的容器div，因为表格显示/隐藏触发器会破坏页面的滚动条。

$(document).ready(function(){
  $(".ReadMore1").click(function(){
    $(".hide1").slideToggle();
  });
});

$(document).ready(function(){
  $(".ReadMore2").click(function(){
    $(".hide2").slideToggle();
  });
});

Answer 2

这也有效：

$(document).ready(function () {
    var rm = $(".ReadMore");
    var hi = $('.hide');
    rm.click(function (e) {
        e.preventDefault();
        var now = $(this).siblings(".hide");
        now.slideToggle();
        hi.not(now).filter(':visible').slideToggle();
    });
});

http://jsfiddle.net/DSbFc/5/

Answer 3

如果我正确理解了您的问题，我认为您可以使用数字元素ID来解决它，如下例所示：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        var totalNumberOfBoxes = 2;
        function expand (id) {
            for ( var i = 0; i < totalNumberOfBoxes; i++ ) {
                if ( i == id ) {
                    $('#hide' + i).show();
                } else {
                    $('#hide' + i).hide();
                }
            }
        }
    </script>
</head>
<body>
    <div style="padding:30px;">
        <div>Always-visible content 0</div>
        <a href="#" onclick="expand(0);">Read More</a>
        <div id=hide0 style="display:none;">Hidden content 0</div>
    </div>
    <div style="padding:30px;">
        <div>Always-visible content 1</div>
        <a href="#" onclick="expand(1);">Read More</a>
        <div id=hide1 style="display:none;">Hidden content 1</div>
    </div>
</body>
</html>

希望这有帮助！

如何只允许一个div扩展阅读更多点击

3 个答案: