Могу ли я использовать глификоны в качестве складных точек?

Возможно ли установить кликируемые глификоны для точек пули вместо кнопок? Прямо сейчас мне удалось надеть пуговицы, но я прячу очки.Могу ли я использовать глификоны в качестве складных точек?

код здесь: http://www.codeply.com/go/WDCzrCNhYG

Я пытаюсь поставить glyphicons для пуль, так что, когда я нажимаю на них они разрушаются, если они выделены жирным шрифтом (это означает, что есть описание в суб-пуль) и они нормальны или исчезли, когда они не разборчивы.

Что-то вроде этого: http://www.codeply.com/go/zAVFMMybdr но с ITEM3 и item4 пуль быть подчеркнуты и интерактивными/сборно-разборные.

Прямо сейчас я пытаюсь выяснить, могу ли я использовать кнопки и скрывать фон и контур, поэтому отображается только глификон. Но в этом случае мне также нужно будет указать, что кнопки Item1 и Item2 не доступны для кликов.

Любая помощь очень ценится. Я новичок в этом, поэтому мне очень жаль, если я не объясню себя достаточно хорошо.

P.S. Как указано, я добавляю код здесь вместо предоставления внешней ссылки.

.btn { 
 
    padding: 0px 5px; 
 
} 
 

 
/* Icon when the collapsible content is shown */ 
 
    .btn:after { 
 
    font-family: "Glyphicons Halflings"; 
 
    content: "\e113"; 
 
    float: left; 
 
    } 
 

 
    /* Icon when the collapsible content is hidden */ 
 
    .btn.collapsed:after { 
 
    content: "\e080"; 
 
    }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<body> 
 
<p class="font_heading"><small>Attractions</small></p> 
 
          <ul id="placePul" style="list-style: none;"> 
 
           <li style="margin-left:28px">Item1</li> 
 
           <li style="margin-left:28px">Item2</li> 
 
           <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#Demo1"></button> Item3</li> 
 
            <ul id="Demo1" class="collapse"> 
 
             <li>Description 1</li> 
 
             <li>Description 2</li> 
 
             <li>Description 3</li> 
 
            </ul> 
 
           <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#Demo2"></button> Item4</li> 
 
            <ul id="Demo2" class="collapse"> 
 
             <li>Description 4</li> 
 
             <li>Description 5</li> 
 
             <li>Description 6</li> 
 
            </ul> 
 
\t \t \t \t \t \t \t  </ul> 
 

 
</body>

источник

2016-09-07 user2576486

Это, конечно, ... вы просто должны переместить атрибут data-toggle к li, а затем предназначаться, что конкретно.

li { 
 
    padding-left: 1.5em; 
 
    position: relative; 
 
} 
 
/* Icon when the collapsible content is shown */ 
 

 
li[data-toggle="collapse"]:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    font-family: "Glyphicons Halflings"; 
 
    content: "\e113"; 
 
    color:black; 
 
} 
 
/* Icon when the collapsible content is hidden */ 
 

 
li[data-toggle="collapse"].collapsed:after { 
 
    content: "\e080"; 
 
    color:grey; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<h4>Toggling </h4> 
 
<ul id="placePul" style="list-style: none;"> 
 
    <li>Item1</li> 
 
    <li>Item2</li> 
 
    <li class="collapsed" data-toggle="collapse" data-target="#Demo1">Item3</li> 
 
    <ul id="Demo1" class="collapse"> 
 
    <li>Description 1</li> 
 
    <li>Description 2</li> 
 
    <li>Description 3</li> 
 
    </ul> 
 
    <li class="collapsed" data-toggle="collapse" data-target="#Demo2">Item4</li> 
 
    <ul id="Demo2" class="collapse"> 
 
    <li>Description 4</li> 
 
    <li>Description 5</li> 
 
    <li>Description 6</li> 
 
    </ul> 
 
</ul>

источник

2016-09-07 14:57:26

Это было именно то, что мне нужно! Благодаря:) – user2576486

Могу ли я использовать глификоны в качестве складных точек?

ответ

Смежные вопросы