Question

我试图完成这件事：当用户单击其中一个框时，应发生以下情况：框更改颜色，向左滑动，此主题的文本变为可见（如这些图像中的插图） enter image description here

enter image description here

有人能指出我正确的方向或解决方案吗？

非常感谢帮助！

我想出了这个：

    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
            <script src="js/jquery.zaccordion.js"></script>
            <style type="text/css">
                /* Just some styles to set the page layout. */
                * {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
                body {padding:20px;line-height:20px;font-size:12px;color:#000;}
                h1 {font-size:18px;margin:10px 0;line-height:1;}
                h2 {font-size:14px;margin:10px 0;line-height:1;}
                p {font-size:12px;margin:10px 0;}
                small {font-size:11px;margin:10px 0;color:#333;}
                a {font-size:12px;text-decoration:none;color:#f00;}
                p span {color:#00f;}
                #container {width:960px;margin:0 auto;padding-bottom:40px;}
                #examples {margin-top:60px;}
                pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
                pre.html {margin:10px 0;}
                .clear {clear:both;}
            </style>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("pre.js").each(function(index) {
                        eval($(this).text());
                    });
                });
            </script>
        </head>
        <body>
            <div id="container">
                <div id="examples">
                <style type="text/css">
                #example10 li {position:relative;}
                #example10 {border: 1px solid black;}
                #example10 div.slider-info {top:0px;height:150px;left:0;position:absolute;width:846;}
                #example10 div.slider-info h1 {font-size:61pt;background-color: white; color:black;border-right: 1px solid black;border-left: 1px solid black;width:115px;height:150px;padding-top: 35px;padding-left: 35px;margin-top: 0;float: left;}
                #example10 div.slider-info p {display:none;float: left;padding-top: 50px;font-size:12px;line-height:14px;color:black;z-index: -1; margin:0 !important;}
                #example10 li.slider-open div.slider-info p {display:inline;}
                #example10 div.slider-info p.slider-text{font-size: 20px;color:black;}
            </style>
            <ul id="example10">
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">1111111111111111111111111111111111111111111.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">222222222222222222222222222222222222222222222.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">333333333333333333333333333333333333333333333.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">44444444444444444444444444444444444444444.</p>
                    </div>
                </li>
            </ul>
<pre class="js">
$(document).ready(function() {
    $("#example10").zAccordion({
        auto: false,
        width: 1300,
        speed: 2000,
        slideClass: "slider",
        slideWidth: 846,
        height: 150
    });
});
    </pre>


        </body>
    </html>

实际上只是因为某些原因才能显示文本（类：滑块文本）根本没有显示，我尝试了多项内容，但是我无法将其显示到手风琴。任何解决方案？

Answer 1

您正在制作的内容看起来像是风格迥异/定制accordion。

您尚未发布当前实施的任何细节，因此很难就后续步骤提出建议，但如何将实施基于jQuery手风琴并将其设计为与您的模型相匹配？

以下是一些相关问题：

OP发布代码尝试后编辑：

看起来你从this page抓住了一个例子，因为你有特定的样式要求，所以不能开箱即用。

首先，将属性auto: false添加到手风琴Javascript中，以阻止它自动播放幻灯片，从而导致DOM发生变化，从而无法进行调试。使用Chrome或Firefox开发者工具（按F12键）并检查未显示的元素。你会发现这个位置是错误的 - 它太过分了。您可以使用top: -125px和left: 200px等CSS（取决于您希望的确切位置）来使文本向上移动并显示。如果您调试该示例，您将看到CSS display: none停止显示“已关闭”项目的文本。

展望未来，请在JSFiddle上加上一个工作示例并链接到它。在侧栏中添加jQuery等外部资源，并使用RawGit链接到github上的文件，例如zAccordion。这使人们更容易查看和调试。我必须把你的HTML，在本地保存，找到zAccordion，导入它，然后让它开始查看你的尝试。

希望有所帮助。调试将使您走得更远 - 检查在某些操作（例如打开或关闭项目）之后应用了哪些CSS规则。当它变得更复杂时，将JavaScript代码移动到单独的JS文件中，以便您可以对其进行调试。

JQuery水平幻灯片效果

1 个答案: