仅在移动视图引导3上折叠

Question

在桌面视图中，“ul .item-description”应该是可见的，但在移动视图上应该折叠。我做到了，但在我看来，这是一个糟糕的决定。我该如何改进？另外，箭头第一次不起作用。如何解决它？我试图用js来解决这个问题，但是当我刷新页面时，我看到箭是如何抽搐的。

对不起，我的英语很糟糕。

的jsfiddle - http://jsfiddle.net/p6t3brob/13/

HTML

<div class="collapsed-item"> 
    <div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title 

    </div> 

    <ul class="item-description hidden-xs" id="items"> 
    <li class="title">title-text</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    </ul> 
</div> 

CSS

.collapsed-item { 
    display: block; 
    outline: 1px solid red; 
    margin-top: 20px; 
    padding: 10px; 
} 

.collapse-element-title { 
    display: block; 
    outline: 1px solid orange; 
    position: relative; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 


.collapse-element-title:after { 
    display: block; 
    position: absolute; 
    top: 15px; 
    right: 10px; 
    width: 10px; 
    height: 10px; 
    border: 2px solid red; 
    border-top: none; 
    border-left: none; 
    transform: rotate(225deg); 
    content: ""; 
} 

.collapse-element-title.collapsed:after { 
    top: 10px; 
    transform: rotate(45deg); 
} 

ul li { 
    margin-bottom: 10px; 
} 

.collapse-element-title { 
    cursor: pointer; 
} 

.collapse-element-title { 
    margin-bottom: 20px; 
} 

@media(max-width: 767px) { 
    #items.in, 
    #items.collapsing { 
    display: block!important; 
    } 
} 
@media(min-width: 768px) { 
    #crownDesc.collapse { 
    display: block !important; 
    height: auto !important; 
    } 
} 

Answer 1

尝试做这样的http://jsfiddle.net/p6t3brob/15/

<div class="collapsed-item"> 
    <div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title 

    </div> 

    <ul class="item-description hidden-xs collapse" id="items"> 
    <li class="title">title-text</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    </ul> 
</div>