文章/答案/技术大牛

发布

社区首页 >问答首页 >编码箭头到手风琴展开

问编码箭头到手风琴展开
EN

Stack Overflow用户

提问于 2015-05-04 12:56:31

回答 2查看 237关注 0票数 0

我看过这里的其他问题，但我没有找到我需要的答案。

我的老板走了出去，留下我几乎是这里唯一的人，我被困在一个反应灵敏的网站设计，只有最基本的html经验。所以我真的需要一步一步地为我拼出来。

我希望能够添加一个箭头，当一个项目关闭时，它是指向的，当它被打开时向下。

我创造了我的箭。他们被称为right.png和down.png

请注意：，如果您通过了这个过程，并认为我有一个更简单的方法来完成这个任务，那么我将简单地删除他的代码，并将其替换为您可以使用的代码。我现在很迷茫，我的副总裁想让我把这件事做完。请帮帮我！

他是如何设置它的：

这是前一个人开始使用的手风琴代码。它起作用了，但他没有把箭也包括在里面。

脚本

    $(function() {
        $( "#gallery" ).accordion({
            heightStyle: 'content',
            collapsible: true,
            autoHeight: false});
    });

/script

，这是第一个扩展的元素。请注意，当用户来到页面.时，他的第一个默认值是打开的

div id=“图库”(我不得不删除<>以显示它在展开部件列表的顶部)

            <h3 class="gallery">Associate of Arts in Liberal Arts</h3>
                <div class="photobox"><img class="image-left" src="images/aala.jpg" width="302" height="200" alt="" />
                    <p>Centenary's accelerated 64-credit hour AALA business program lets you complete your Associate of Arts degree in either in-class or online. This program focuses on business, leadership, teamwork, and communication. We provide students with the skills needed to start careers in a competitive and fast-moving economy. Our program focuses on leadership, teamwork, and communication. These skills build your personal growth, service to the community, and career advancement. Enhance your employment opportunities or transfer your credits to earn your Bachelor's degree. </p>
                </div>

--这是扩展的第二个元素，当用户来到页面时，这个元素被默认关闭。。

<h3 class="gallery">Bachelor of Science in Business Administration</h3> 
                <div class="photobox"><img class="image-left" src="images/bsba.jpg" width="302" height="200" alt="" />
                    <p>This accelerated 128-credit hour business program gives you the essentials in the business field. Your degree is organized into three parts: Core Requirements, the Business Major, and free electives. Core Requirements include courses from the liberal arts disciplines. This guarantees uniformity of study without sacrificing your educational interests.</p>
                </div>

我希望这对每个人来说都足够清楚。

谢谢!

编辑：

谢谢大家的努力。你们建议的我都试过了但我没办法。对我来说做的太多了。每次我添加或更改某些内容时，它都会破坏页面上的其他内容。

我就告诉他们，除非他们雇了新的人，否则他们就得走了。

非常非常感谢。

html

css

回答 2

Stack Overflow用户

发布于 2015-05-04 13:08:51

如果您使用的是JQuery UI手风琴，您只需添加触发样式的CSS：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

编辑:将您的代码与示例jQuery UI手风琴代码一起使用，以获得所需的内容：

看看这个例子：http://codepen.io/anon/pen/LVpPmN

在CSS部分，您可以看到我覆盖了标准的CSS类。

票数 0

Stack Overflow用户

发布于 2015-05-04 13:15:45

对于jquery手风琴，可以为活动状态和非活动状态提供“图标”属性。可以自定义这些类，以添加以图像为背景的自定义类。

var icons = {
  header: "",         //provideCustom Classes here for active and inactive states
  activeHeader: ""    //
};
$( "#gallery" ).accordion({
  icons: icons
});

https://jsfiddle.net/Lcsbcn22/

编辑

增加了一个演示。请查看定制类(红色和蓝色)是如何放置在手风琴标题上的。类似地，您必须创建两个类，将箭头图像作为背景图像，并将它们放入图标对象中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30030758

复制

相似问题

问编码箭头到手风琴展开
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问编码箭头到手风琴展开EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问编码箭头到手风琴展开
EN