Question

我在这里看了其他问题，但我找不到我需要的答案。

我的老板走了出去，让我几乎成为这里唯一的人，我被困在一个只有最基本的HTML体验的响应式网站设计中。所以我真的需要一步一步地为我拼写。

我希望能够在项目关闭时添加一个向右指向的箭头，并在打开时添加向下箭头。

我创建了箭头。它们被称为right.png和down.png

请注意：如果你完成了这一点并认为我有一个更简单的方法可以做到这一点，那么我将简单地删除他的代码，并用你所拥有的东西替换它。我现在迷失了，我的副总裁希望我完成这件事。请帮忙！

他是如何设置的：

这是前一个人开始使用的手风琴代码。它有效，但他没有包含箭头。

脚本

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

/脚本

这是第一个展开的元素。请注意，当用户访问该页面时，他有第一个默认开放....

div id =“gallery”（我必须删除＆lt;＆gt;才能显示它，它位于展开部件列表的顶部）

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

我希望每个人都清楚这一点。

谢谢！

编辑：

感谢大家的尝试。我尝试了你们建议的一切，我无法让它发挥作用。这对我来说太过分了。每次我添加内容或更改某些内容时，都会破坏页面上的其他内容。

我会告诉他们，他们必须离开，直到他们雇用一个新人。

很多，非常感谢。

Answer 1

如果您使用的是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类。

Answer 2

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

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

https://jsfiddle.net/Lcsbcn22/

修改

添加了一个演示。请查看自定义类（红色和蓝色）如何放置在手风琴标题处。同样，您必须使用箭头图像创建两个类作为背景图像，并将它们放在图标对象中。

编码箭头到手风琴扩展

2 个答案: