手风琴编码箭头展开

我已经看过其他问题，但我没有找到我需要的答案。手风琴编码箭头展开

我的老板走了出去，让我几乎成为这里唯一的人，而我陷入了跳跃到只有最基本的html体验的响应式网站设计。所以我真的需要它一步一步地为我阐明。

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

我有我的箭头创建。他们被称为right.png和down.png

请注意：如果你通过这个，并认为有对我来说，这样做，那么我就干脆干掉他的代码，并与东西取代它的简单方法你有这个作品。我现在很迷茫，我的副总裁想让我完成这件事。请帮忙！

他怎么设置它：

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

脚本

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

/脚本

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

div id =“gallery”（我不得不删除<>使其显示它是在膨胀部的列表顶部）

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

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

谢谢！

编辑：

感谢您尝试每个人。我尝试了你们所建议的一切，但我无法完成它的工作。这对我来说太过分了。每次添加内容或改变内容时，都会在页面上打破其他内容。

我只是告诉他们，他们将不得不离开，直到他们雇用新的人。

很多很多，谢谢。

来源

2015-05-04 Damsel in Distress

每个手风琴部件是否都有自己的箭头来表示哪个部分是开放的，哪个部分是关闭的？ – HisPowerLevelIsOver9000

我没有时间键入完整的答案，但这是使用纯CSS的方式。如果您需要使用图像而不是字符，请在span上使用background-image属性，而不要使用:: next内容上的字符。 http://jsfiddle.net/thePivottt/574a2grb/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类。

来源

2015-05-04 13:08:51 Rotan075

感谢您的尝试，我不知道是否正在使用jquery，我从来没有在jquery工作过。我很抱歉，我感到非常愚蠢，我无法弄清楚这一点。我看了你的例子，但我不知道要改变什么或者把你展示的东西放在哪里。 –

如果你看看你的HTML文件，你看看里面是什么：''。你能否发现是否有对JQuery UI的参考？ – Rotan075

对于jQuery UI手风琴，可以给出“图标”属性用于活动状态和非活动状态。这些可以自定义添加您自己的自定义类与您的图像作为背景。

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

https://jsfiddle.net/Lcsbcn22/

编辑

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

来源

2015-05-04 13:15:45 Ranjith

我在哪里放什么？我是否在头后的“”之间放置了一些东西？我会放什么？ –

手风琴编码箭头展开

回答

相关问题