jquery-ui 手风琴内的链接

Question

我在 jquery-ui 手风琴 div 的内容中有一个链接。它可以工作，但格式与我的其他链接不同。我在 jquery-ui 手风琴页面 上找到了这个：

如果您在手风琴内容中有链接并使用 a 元素作为标题，请向它们添加一个类并将其用作标题，例如。标头：'a.header'。

但是，我不太确定该怎么做。我假设我需要更改手风琴的 .css 以使用这个新的 a.header 类作为标题，然后我的常规 a 元素将使用其余 a< 的 css我的网站上的 /code> 元素使用了什么？

这是手风琴的 .css：

    /* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

Answer 1

我建议使用像 firebug 这样的东西来检查你的元素。从那里您可以准确地找出 CSS 的哪一部分正在影响您的链接，以便您可以这样设计它。或者为链接提供自己的类名称，以按照您想要的方式设置其样式。如果您想直接进入 jquery UI CSS，也许可以研究一下其中包含“a”的标签样式，看看这是否能让您到达任何地方。

即：

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }

那些

Answer 2

您可以更改标头以使用标签以外的其他内容，然后在创建手风琴时设置属性：

<div id="accordion">
  <h3>My Header</h3>
     <div>My content with a <a href="#">link</a></div>
  <h3>Header Two</h3>
     <div>Some more stuff...</div>
</div>


$("#accordion").accordion({ header: 'h3' });

Answer 3

我有一个网站需要执行此操作，我使用下面的代码来区分手风琴中的链接和标题：

标记：

<div id="accordion">
  <h3>
    <a href="MyNewPage.aspx" rel="newpage">Link To a New Page</a>
  </h3>
  <h3>
    <span class="name">Dental Providers</span>
  </h3>
    <div>
        Some Content with a <a href="#">Link to more stuff</a></div>
    </div>
</div>

JQuery：

     //redirect headers that link to new pages
     $('A[rel="newpage"]').click(function () {
         window.location=$(this).attr('href');
         return false;
     });
     //set up the accordion to use the h3 header
      $("#accordion").accordion({
         header: 'h3', 
         autoHeight: false,
         collapsible: true,
         fillSpace: false,
         icons: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
     });