2016-04-13 78 views
2

此Meteor代碼使用帶有動態數據的靜態模板。 css flexbox列用於顯示段落和li等元素。點擊時在元素上應用CSS樣式,父級獨立

應該是,當用戶點擊一個段落時,其背景顏色變爲淺灰色的「模擬列表中的選定項目」,這是可行的,但問題是當點擊li時會回到白色。由於點擊事件是由Meteor模板事件處理的,因此我可以訪問$(event.target),當我玩時,它會高亮顯示字符串,但不會顯示字符串周圍的整個「列表像」空間,看起來不太好。

我給每個「組」的不同tabindex值無濟於事。我怎樣才能使它工作,以便段落保持「選定」,當我點擊選擇一個李?由於

.selectable:focus { 
 
    background-color: lightgray; 
 
} 
 

 
.flex-item { 
 
padding: 0.5em 2%; 
 
border-bottom: 1px solid #333; 
 
} 
 

 
.flex-container { 
 
margin: 1em 0; 
 
display: -webkit-flex; 
 
display: -ms-flexbox; 
 
display: flex; 
 
-webkit-flex-flow: column wrap; 
 
-ms-flex-flow: column wrap; 
 
flex-flow: column wrap; 
 
}
<ul class="sub-menu flex-container"> 
 
     {{#each subMenuItems}} 
 
     <li class="flex-item sub-menu-item selectable" tabindex="1"><h5>{{this}}</h5></li> 
 
     {{/each}} 
 
    </ul> 
 

 
<form class="flex-container"> 
 
{{#each dataItems}} 
 
    <p class="selectable" tabindex="0" data-age={{value.[2]}}> 
 
    <b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[3]}} 
 
    </p> 
 
{{/each}} 
 
</form>

回答

0

這是不可能的用戶已經將焦點改變到另一個項目後,從焦點狀態保持CSS。

爲了保留CSS更改,必須將另一個類添加到所選元素。

考慮嘗試這樣的:

的background-color屬性添加到可選元素與類,「活動」。

.selectable.active { 
    background-color: lightgray; 
} 

要將「活動」類添加到所選元素,我們需要在我們的.js文件中添加一些javascript。 請注意,「yourTemplate」應替換爲正在使用的相應模板。

Template.yourTemplate.events({ 
    'click .selectable': function (event) { 
     $(event.target).addClass('active'); 
    } 
}); 

這會在用戶更改焦點後在被點擊的段落中保留背景顏色。

+0

使用'$(event.target)'的問題是,它會突出顯示目標,在li的情況下,這將只是h5文本。另一點,你的第一個代碼'.selectable.active',這是一個合法的類標識符嗎?或者在他們之間沒有空格的錯字? –

+0

單擊li時,點擊功能不會觸發。因爲點擊功能需要,li沒有「可選擇」類。 .selectable.active不是拼寫錯誤。它將把這些屬性應用於任何具有「可選擇」和「有效」類的元素。 – EoghanTadhg

+0

此解決方案將創建的另一個問題是,它不允許在相同類型的元素上進行選擇切換,因此一旦選擇了段落,它將不允許「改變主意」。李沒有一個可選擇的課程對我來說太過分了,它實際上是這樣的,它可以選擇它的項目。我會編輯它。 –