Question

原始代码是：

<ul <li>

我希望在容器之前添加项目符号，看起来像这样。

ScreenShot

我尝试在<div class="panel panel-default">之前添加</li> </ul>，在<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit....</div>之后添加import java.util.Arrays; public class DIE { public static String[] printPermutations(String s) { int l = s.length(); int f = factorial(l); int count = 0; String[] array = new String[f]; permute("", s, array, 0); Arrays.sort(array); return array; } private static String[] permute(String x, String s, String [] array, int count) { int l = s.length(); if (l == 0) { array[count] = (x + s); } for (int i = 0; i < l; i++) { permute(x + s.charAt(i), s.substring(0, i) + s.substring(i +1, s.length()), array, count); count++; } return array; } public static int factorial(int l) { if (l == 1) { return 1; } else { int result = l * factorial(l - 1); return result; } } /* Do not edit anything below this comment. */ public static void main(String[] args) { String[] permutations = printPermutations(args[0]); for(String p : permutations) { System.out.println(p); } } } 这样可以获得每个盒子的子弹点，但如果另外一个盒子被点击而不是第一个盒子，则不会允许盒子关闭。

希望有人可以提供帮助，我有0次HTML经验并且这样做很有趣所以如果你不想帮忙不评论。感谢

Answer 1

您可以使用伪元素:after或:before获取子弹。

＆＃13;

.panel.panel-default:before {
    content: '';
    position: absolute;
    left: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: black;
    top: 15px;
}

.panel.panel-default {
    position: relative;
}

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

＆＃13;

为手风琴HTML添加项目符号

1 个答案: