Question

我在jquery-ui手风琴div的内容中有一个链接。它工作正常，但格式不像我的其他链接。我在jquery-ui accordion page上找到了这个：

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

但是，我不确定如何做到这一点。我假设我需要更改手风琴的.css以使用这个新的a.header类作为标题，然后我的常规a元素将使用我的a元素的其余部分的css网站使用？

这是手风琴的.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' }
     });

在jquery-ui手风琴中链接

3 个答案: