semantic-ui下拉菜单中的简单不可点击的文字 [英] Simple non clickable text in semantic-ui dropdown

问题描述

我使用semantic-ui，我想在下拉列表中显示一些信息文本。但它作为一个链接，即使它是一个< div class =header item>

这里的档案，设置和注销是链接和休息是文字（不可点击）

样品模型我尝试过。


< 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>动作一< / a>
< a href =＃class =item>动作一< / a>
< a href =＃class =item>动作一< / a>
< / div>
< / div>


Semantic-ui将 div 视为链接和下拉菜单点击关闭。

是否有更好的方法在semantic-ui中实现？或者如何防止点击事件。

解决方案

您应该自定义项目选择器。尝试使用下一个代码

  $。fn.dropdown.settings.selector.item ='.menu> .item：否（.header）; //更改所有下拉列表的选择器
  

您也可以在本地指定项目选择器。详细了解下拉DOM设置，以正确配置它。

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.

解决方案

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

这篇关于semantic-ui下拉菜单中的简单不可点击的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！