2

我有一个带有博客结构的页面，我将在其中放置多个帖子。我面临的问题是试图让一个阅读更多链接被扩展并折叠其他链接。我尝试了不同的 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>
4

3 回答 3

2

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

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

$(document).ready(function(){
  $(".ReadMore2").click(function(){
    $(".hide2").slideToggle();
  });
});
于 2013-08-11T21:52:15.847 回答
1

如果我正确理解了您的问题，我认为您可以使用数字元素 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>

希望这可以帮助！

于 2013-08-11T21:37:18.313 回答
1

这也有效：

$(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/

于 2013-08-11T22:39:50.740 回答