Simple non clickable text in semantic-ui dropdown

问题

I am using semantic-ui and I want to show some info text in dropdown. But it act as a link even it's a <div class="header item">

Here profile, settings and logout are link and rest are text(non-clickable)

sample mockup I tried with.

<div class="ui dropdown item"> <i class="icon dropdown"></i> <div class="menu hidden"> <div class="header item">Narottam Guattom</div> <a href="#" class="item">Action one</a> <a href="#" class="item">Action one</a> <a href="#" class="item">Action one</a> </div> </div>

Semantic-ui treat that div as a link and dropdown get closed on click.
Is there better way to implement this in semantic-ui Or how can I prevent click event.

回答1:

You should customize items selector. Try to use next code

$.fn.dropdown.settings.selector.item = '.menu > .item:not(.header)'; // change selector for all dropdowns

Also you can specify item selector locally. Read more about dropdown DOM settings to configure it properly

回答2:

$( ".header " ).click(function( event ) {
event.preventDefault();
........//Custom code 
});

来源：https://stackoverflow.com/questions/25265519/simple-non-clickable-text-in-semantic-ui-dropdown