JQueryUI手风琴：标题和用于排列图像/文本的内联块 [英] JQueryUI Accordion: Headers and an inline block for arranging image/text

问题描述

这是我作为默认值的一个例子。我现在想做的是找出我的手风琴在哪里拉它的标题样式。对于手风琴标题：

 < h3>手风琴幻灯片的标题在这里< / h3> 
  

但我找不到任何h3风格的参考。

当我想使用我想要的设置在一个页面上创建多个手风琴时，我使用了：

  $（function（）{
 
 $（＃accordion）。accordion（{header：h3，active：false，collapsible：true}）; 
  
 
 
 
我在这里使用了h3。
 
 
 
样式部分：
  h3 {font-weight：bold; font-size：1.5em;} 
  
但是它没有影响任何东西（因为某些原因，我使用这个网站已经完全删除样式html。）
 
 
 
我想要的是更改头部看起来更像底部的
示例，而不是顶部：
 
 
 
  
 
 
 
这需要更大，更容易阅读。
 
 
 
 ，是当幻灯片打开，我有一个图像在那里与一些文本。 
 
 
 
以前，我使用过的图片文字会显示在图片的右上角，而不是默认的文字。以下操作：
  .accordion img {
 display：inline-block; 
 width：180px; 
 height：125px; 
 vertical-align：top; 
 margin-right：10px; 
} 
 .accordion .taxt {
 display：inline-block; 
 width：280px; 
} 
  
但这是我不知道在哪里适应CSS 
 
 
 
以下是当前html中的样子：
 < div id =accordion> 
< h3>导师带领的学习< / h3> 
< div>< img src =http://i.imgur.com/30qxeXe.jpgheight =125width =180/> < taxt>要查看讲师指导的课程信息，请点击< a href =LINK HERE>此处< / a>< / taxt>< / div> 
< h3>电子学习< / h3> 
< div>< img src =http://i.imgur.com/mVynNfO.jpgheight =125width =180/> < taxt>要查看电子学习课程信息，请点击< a href =LINK HERE>此处< / a>< / taxt>< / div> 
< / div> 
  
编辑：JSFiddle  -   http://jsfiddle.net/jz8Bz/  
 
 
 
奇怪的是，小提琴的标题看起来更好... 
 
 
 
希望这是所有必需的信息，这是一个长期的邮件：） 
 
 
 
 
 
 
 Jon 
 
 
 
编辑：临时解决字体大小问题，我只是使用style =尺寸：20px在标题标签...不理想，但它的工作我猜猜？仍然困惑为什么JSFiddle看起来不同于我使用它的网站虽然。 
解决方案
您需要进行一些更改。 
 
 
 
我添加了 ul 和 li 为css。这是HTML：
 < div> 
< ul class =foobar> 
< li class =foo> 
< img src =http://i.imgur.com/u6aq5MW.jpgheight =125width =180/> 
< / li> 
< li class =bar>要查看电子学习课程信息，请点击
< a href =Link>此处< / a& 
< / li> 
< / ul> 
< / div> 
  
对于css：
  #accordion .foobar {
 margin：0px; 
 padding：0px; 
} 
 
 #accordion .foobar .foo {
 display：inline-block; 
 width：180px; 
 height：125px; 
 vertical-align：top; 
 margin-right：10px; 
} 
 
 #accordion .foobar .bar {
 display：inline-block; 
 width：280px; / *放大这个值，如果你想要文本在一行* / 
} 
  
这是一个小提琴： http://jsfiddle.net/PvvAc/  
 
 
 
至于为什么你的标题在你的页面而不是jsfiddle搞砸，你必须有一些在你的页面上不能正常播放的CSS规则。
 
What I'm trying to do at the moment is figure out where the heck my accordion is pulling it's heading styles from.

This is what I had as default for the accordion headers:
<h3>Header for Accordion Slide Goes Here</h3>
However I couldn't find any reference to the h3 style.

When I wanted to create multiple accordions on one page with the settings that I wanted, I used:
$(function() {

        $("#accordion").accordion({ header: "h3", active: false, collapsible: true });
Again I used h3 here.

I tried adding this to the end of the styles section: 
h3{ font-weight:bold; font-size:1.5em; }
But it didn't affect anything. (For some reason, the site I'm using this on has removed the styles completely from the html.)

What I want is to change the header to look more like the one in the bottom 
example, instead of the top:



i.e. it needs to be larger and much easier to read.

The other issue I'm having, is when the slide opens, I have an image in there with some text. Which needs to be displayed with the text aligned to the top right of the image, instead of the default, which starts it at the lower right.

Previously I had used the following to do this:
.accordion img{
    display:inline-block;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;
}
.accordion .taxt{
    display:inline-block;
    width:280px;
}
But this is where I'm not sure where to adapt the CSS (or if it's possible) so that I can apply the same to this new JQueryUI accordion.

Here's how it looks in the html currently:
<div id="accordion">
<h3>Tutor-led Learning</h3>
<div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180" /> <taxt>To view the tutor-led course information, please click <a href="LINK HERE">here</a></taxt></div>
<h3>E-Learning</h3>
<div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180" /> <taxt>To view the E-Learning course information, please click <a href="LINK HERE">here</a></taxt></div>
</div>
Edit: JSFiddle - http://jsfiddle.net/jz8Bz/ 

Strangely the headers in the fiddle look much better...

Hopefully that's all the info required, this ended up as a long post :)

Thanks in advance for any help,

Jon

Edit: Temporary work-around for the font size, I just used style="font-size:20px" in the header tags...not ideal but it works I guess? Still confused as to why the JSFiddle looks different from the site I'm using it on though. 
解决方案
You needed a few changes. 

I added ul and li tags with class names for the css. Here's the HTML:
<div>
  <ul class="foobar">
    <li class="foo">
      <img src="http://i.imgur.com/u6aq5MW.jpg" height="125" width="180" />
    </li>
    <li class="bar">To view the E-Learning course information, please click 
      <a href="Link">here</a>
    </li>
  </ul>
</div>
For the css:
#accordion .foobar { 
  margin:0px;
  padding:0px;
}

#accordion .foobar .foo {
  display:inline-block;
  width:180px;
  height:125px;
  vertical-align:top;
  margin-right:10px;
}

#accordion .foobar .bar {
  display:inline-block;
  width:280px;         /* enlarge this value, if you want text all on one line */
}
Here is a fiddle: http://jsfiddle.net/PvvAc/

As to why your headers are messed up on your page and not the jsfiddle, you must have some css rules on your page that aren't playing nicely.

                        
这篇关于JQueryUI手风琴：标题和用于排列图像/文本的内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！