Question

我是jQuery的新手，并且一直在关注Panel Slide的教程。 http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/all-comments/#comments

到目前为止一切顺利。

虽然我需要一些面板幻灯片。该页面看起来与此非常相似 woothemes.com/themes /

单击图像时，100％宽度的面板将在该行下方展开，以显示更多信息。

我只是想知道是否有替代方法可以为每个不同的图像使用唯一的类？

希望这是有道理的。

感谢您的帮助。

学家

Answer 1

您可以使用DOM中元素的相对位置而不是类。

一个简单的示例是直接按面板显示图像，并在单击图像以滑动打开下一个同级元素时使用 .next() 。

您可以将所有图像和内容放入一个父div中。这样你就不必在父div中使用任何类。

这是一个简单的滑块系统，如果关闭Javascript，它会很好地降级。

让我们设置一个简单的例子。

HTML：

<div id="sliderContent">

    <div>
        <img src="image1.jpg" />
        <div>Content about image1 here.</div>
    </div>

    <div>
        <img src="image2.jpg" />
        <div>Other content about image2 here.
             <p>You can put as much stuff in these as you want</p>
        </div>
    </div>

    <div>
        <img src="image3.jpg" />
        <div>Sample content about image3 her here.</div>
    </div>

</div>

即使关闭了Javascript，上述内容也会以合理的方式显示。

将img嵌套在父div中是件好事，因为img不是块级元素，所以换行符会更好，而父div 1}}包含每个图片和内容div。

div占据宽度的100％。您可以在内容div中添加子div，您可以设置样式，可以将hr放入其中等等。

现在让我们创建我们的jQuery。它会使所有内容滑块不可见。如果单击图像，它也会使相应的滑块切换。

剧本

$(function() {

    $("#sliderContent img").next().hide();

    $("#sliderContent img").click(function() {
        $(this).next().slideToggle();

    });
});

的 jsFiddle example

就是这样。当然，你可以通过添加图形和颜色来改进，但中心概念非常简单。

这是一种向每个内容DIV添加关闭按钮的简单方法。在HTML中包含关闭按钮并不好，因为如果禁用Javascript它们就毫无意义，所以我们动态添加它们：

$(function() { // Hide and add a close button to each content div slider $("#sliderContent img").next().hide().append('<input ' + 'type="button" value="close"/>'); $("#sliderContent img").click(function() { $(this).next().slideToggle(); }); // use .parent() to make the close buttons work $("input").click(function() { $(this).parent().slideUp(); }); });

的 jsFiddle example

多个jQuery面板幻灯片

1 个答案:

HTML：

剧本

的 jsFiddle example

的 jsFiddle example