在自适应设计中在其行下方显示div内容

Question

我目前有一个8 div，它的数量可能会增加或减少。每个div都包含单击它所显示的内容的链接。在固定为1024px及更高的像素时，它可以正常工作。响应速度慢，在较低的分辨率下，要显示的隐藏div未对齐。 有人可以帮我吗？

这是我写的html核心：

        <div class="client-details fl_left" style="display: none;"
            id="citiCab2">
            <span class="pointer" style="left: 73px;"></span> <a
                class="close-button" href=""></a>
            <div class="client-container fl_left">
                <a href="http://citicabsinc.com/" target="_blank"><img
                    src="images/citicabs-big.png"></a>
            </div>
            <div class="client-container fl_right">
                <h1>Citi Cabs</h1>

                <p>The client is a progressive firm, providing eminent car rental
                    services to all kinds for travel requirements. It caters transport
                    and communication to its customers all over India.</p>

                <p class="title">Client Requirement </p>

                <p>The client wanted to come up with a website portal, that can be
                    navigated with ease by the visitor who is looking for the car
                    service within Bangalore and anywhere in India.</p>

                <p class="title">Challenge</p>

                <p>We the Maganiva Solutions Team had to predominantly understand
                    website workflow making it intuitive for the user to use it with
                    ease keeping in mind the visitor's page. </p>

                <p class="title">What Maganiva Solutions delivered </p>

                <p>Maganiva did a complete market study to get insights and came up
                    with a comprehensive model, wherein we not only designed the user
                    friendly website but also provided back-end support to the client
                    in Branding its online presence through SEO.</p>
            </div>
        </div>

相同的Java脚本。还有助于减小代码的大小，如您所见，我只是一次又一次地重复了相同的代码，只是单击鼠标单击特定div时id有所不同。

jQuery(function() {
    $('#citiCab1').click(function() {
        $(".client-details").addClass('display-none');
        $('#citiCab2').attr('style', function(i, style) {
            jQuery(this).removeClass('display-none');
            return style.replace(/display[^;]+;?/g, '');
        });
        $("#citiCab2").addClass('display');
    });



    $('#primus1').click(function() {
            $(".client-details").addClass('display-none');
            $('#primus2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });

            $("#primus2").addClass('display');
        });

        $('#MantriEden1').click(function() {
            $(".client-details").addClass('display-none');
            $('#MantriEden2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#MantriEden2").addClass('display');
        });

        $('#DilDaruDosti1').click(function() {
            $(".client-details").addClass('display-none');
            $('#DilDaruDosti2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#DilDaruDosti2").addClass('display');
        });

        $('#chai1').click(function() {
            $(".client-details").addClass('display-none');
            $('#chai2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#chai2").addClass('display');
        });

        $('#mbnt1').click(function() {
            $(".client-details").addClass('display-none');
            $('#mbnt2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#mbnt2").addClass('display');
        });

        $('#act1').click(function() {
            $(".client-details").addClass('display-none');
            $('#act2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#act2").addClass('display');
        });
        $('#mathru1').click(function() {
            $(".client-details").addClass('display-none');
            $('#mathru2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#mathru2").addClass('display');
        });
    });

Answer 1

希望这是您想要的内容，请尝试以下html。 希望它对您有帮助！！！

HTML：

<p><a href="JavaScript:toggleMe('desc1');"><strong>Head1</strong></a></p>
    <div class="desc" id="desc1" style="display: none;">
        <h2>Description 1</h2>
        <p>Content</p>
        <p><a class="close" href="JavaScript:toggleMe('desc1');">Close</a></p>
    </div>
<p><a href="JavaScript:toggleMe('desc2');"><strong>Head2</strong></a></p>
    <div class="desc" id="desc2" style="display: none;">
        <h2>Description 2</h2>
        <p>Content</p>
        <p><a class="close" href="JavaScript:toggleMe('desc2');">Close</a></p>
    </div>

CSS：

.close{
    text-align:right;
    display:block;
    padding:10px;
}
.desc{
    background:#dedede;
    padding:10px;
}

脚本：

<script>
function toggleMe(a) {
    var e = document.getElementById(a);
    if (!e) return true;
    if (e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    }
</script>

小提琴演示