僅在正確的符號點擊打開手風琴

Question

如果我點擊標題上的任意位置，我想禁用單擊事件以打開手風琴。相反，我只想點擊最右側的符號.... 此處它打開，如果我點擊保存按鈕..

<accordion-group is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading> 
      I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 

這裏的plunker ..

link

Answer 1

在HTML文件中我修改：

<accordion close-others="oneAtATime"> 
    <accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading style="pointer-events:none !important;"> 
      I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 
    </accordion> 

你應該在你不會對鼠標點擊事件作出反應的元素上添加css屬性：「pointer-events：none！important」，並在你的圖標指示器上設置「pointer-events：auto！important」 。只有當您點擊箭頭圖標時才能打開手風琴。這應該工作:)

爲了讓您的解決方案更優雅，你可以讓CSS類，如：

.disable-click-event { 
    pointer-events: none !important; 
} 

.enable-click-event { 
    pointer-events: auto !important; 
} 

還有防止事件冒泡（$ event.stopPropagation（））的選項，但在這種情況下，我不知道確切的事件被調用的位置，因此需要經過艱苦的調查才能找到它。

還有一個提示：如果任何問題都可以用CSS代替JS來解決，那麼它完全值得這樣做:) JavaScript事件不容易調試，所以CSS修復比查找事件要快得多冒泡。我可以推薦你使用簡單的CSS解決方案，並有良知:)乾杯