如何清除大纲出现在点击Bootstrap UI Accordion [英] How to remove outline appeared on click in Bootstrap UI Accordion

问题描述

我试图使用angular-ui bootstrap手风琴在标题中保存引导表。
当用户点击手风琴标题并打开时，会出现一个奇怪的轮廓。它看起来像这样（一些标题周围的浅蓝色矩形）：

我明白这是因为我使用了< div> ，但是如何消除这种行为？ / p>

代码是：

 < accordion close-others = true> 
< accordion-group> 
< accordion-heading> 
< div>一些标题< / div> 
< / accordion-heading> 
 Text 
< / accordion-group> 
< accordion-group> 
< accordion-heading> 
< div>另一个标题< / div> 
< / accordion-heading> 
< / accordion-group> 
< / accordion> 
  

解决方案

大纲将添加到面板标题面板标题< a>标签，其中包含 .accordion-toggle 类。所以，为了避免 * 全选选择器，您可以这样做：

  .accordion-toggle：focus {outline：none;} 
  

for！important（），以便尊重您之后的开发者）。

---

outline 是一个速记属性，值为 outline-style 。在这种情况下，我将 outline-style 设置为 none 。

---

这是一篇很棒的文章特异性，如果你不相信！除了一些情况，应该避免所有的重要。

I'm trying to use angular-ui bootstrap accordion to hold bootstrap table inside the heading. When user clicks on the accordion heading and it opens, a strange outline appears. It looks like this (the light blue rectangle around "Some title"):

I understand it happens because I used the <div> , but how can I eliminate this behavior?

The code is:

<accordion close-others="true">
  <accordion-group>
    <accordion-heading>
      <div>Some title</div>
    </accordion-heading>
    Text
  </accordion-group>
  <accordion-group>
    <accordion-heading>
      <div>Another title</div>
    </accordion-heading>
  </accordion-group>
</accordion>

解决方案

The outline is added to the panel-heading panel-title <a> tag, which has an .accordion-toggle class. So, to avoid the * catch-all selector you can do this:

.accordion-toggle:focus{outline: none;}

With this solution there is no need for !important either (so you'll respect the devs who come after you).

---

outline is a shorthand property whose only required value is outline-style. In this case I am setting outline-style to none.

---

This is a great article that explains specificity, if you're not convinced that !important should be avoided in all but a couple of cases.

这篇关于如何清除大纲出现在点击Bootstrap UI Accordion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！