Mở Accordion chỉ khi nhấp vào biểu tượng bên phải

Question

Tôi muốn vô hiệu hóa sự kiện nhấp mở mở accordion nếu tôi nhấp vào bất kỳ đâu trên tiêu đề.Instead Tôi chỉ muốn nhấp vào biểu tượng bên phải ... Đây nó mở nếu tôi nhấp vào nút Save ..

<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> 

đây là plunker ..

link

Answer 1

trong file html của bạn tôi chỉnh sửa:

<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> 

Bạn nên thêm thuộc tính css: "pointer-events: none! Important" trên các thành phần mà bạn sẽ không phản ứng trên sự kiện nhấp chuột và đặt "pointer-events: auto! Important" trên chỉ báo biểu tượng của bạn . Accordion chỉ nên được mở khi bạn nhấp vào biểu tượng mũi tên. Điều đó sẽ làm việc :)

Để thực hiện giải pháp của bạn thêm thanh lịch, bạn có thể làm cho lớp CSS như:

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

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

Ngoài ra còn có một tùy chọn có thể ngăn chặn sự kiện bọt ($ event.stopPropagation()) nhưng trong trường hợp này tôi không biết chính xác nơi mà sự kiện được gọi nên nó cần điều tra khó khăn để tìm ra.

Một gợi ý nữa: nếu có bất kỳ vấn đề nào có thể giải quyết bằng CSS thay vì JS thì hoàn toàn đáng để làm điều đó :) Các sự kiện JavaScript không dễ dàng để gỡ lỗi, vì vậy sửa lỗi CSS sẽ nhanh hơn nhiều so với lỗi bẩn. sủi bọt. Tôi có thể khuyên bạn sử dụng các giải pháp CSS đơn giản với lương tâm rõ ràng :) chúc mừng