Question

我目前有8个div，它可能会增加或减少count.Each这些div包含点击显示内容与它有关。它固定在1024px及以上它工作正常。但问题是所有这些div都是响应式的，在较低分辨率下，要显示的隐藏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>

Fiddle Demo

在响应式设计中将div内容显示在其行下方

1 个答案: