JQuery 水平滑动效果

Question

我正在努力完成这项工作：当用户单击其中一个框时，应该发生以下情况：框改变颜色，向左滑动并且该主题的文本变得可见（如这些图像中的插图）

任何人都可以为我指出正确的方向或解决方案吗？

非常感谢您的帮助！

我想到了这个：

    <!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>

实际上仅出于某种原因有效文本 (class: slider-text) 根本不显示，我尝试了多种方法但无法显示进入手风琴。有什么解决办法吗？

Answer 1

你做的看起来像 heavily-styled/customised accordion。

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

以下是一些相关问题：

jquery - Collapsing / Expanding divs?
Expand and collapse a div using javascript

在 OP 发布代码尝试后编辑：

您似乎从 this page 中获取了一个示例，因为您有特定的样式要求，所以它无法立即使用。

首先，将属性 auto: false添加到手风琴Javascript中以阻止其自动播放幻灯片，从而导致DOM发生变化，使其成为无法调试。使用 Chrome 或 Firefox 开发人员工具（按 F12）并检查未显示的元素。你会发现位置不对——太低了。您可以使用 CSS 例如 top: -125px 和 left: 200px（取决于您想要的确切位置）让文本向上移动一点并显示。如果调试该示例，您会看到 CSS display: none 停止显示 "closed" 项的文本。

今后，请将 JSFiddle and link to it. Add external resources such as jQuery in the sidebar, and use RawGit 到 link 上的工作示例放到 github 上的文件中，例如 zAccordion。这使得人们更容易查看和调试。在我开始查看您的尝试之前，我必须获取您的 HTML，将其保存在本地，找到 zAccordion，将其导入并使其运行。

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

JQuery 水平滑动效果

JQuery horizontal slide effect

javascript

css

jquery

slider