0

I need to dismiss a ui dropdown while hovering over it. Now, the ui drop down is just visible and never shows or hides when tapped or clicked.

Here are the snippets:

<div ng-show="user" class="ui pointing dropdown link item">
    <span class="text">Reg</span>
    <i  class="dropdown icon"></i>
    <div class="menu transition visible">
      <a class="item" href="/xyz">
        Schools
      </a>
      <div class="divider"></div>
      <a class="item" href="/xyz2">
       Admissions
      </a>
    </div>
  </div>

UI drop down is initialized like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/dropdown.js" type="text/javascript"></script>

<script type="text/javascript">

$('.ui.dropdown')
.dropdown();
</script>

What changes are needed here?

wazz
  • 4,953
  • 5
  • 20
  • 34
rocket
  • 253
  • 1
  • 2
  • 13

1 Answers1

4

You just need to add the css class simple for hover.

<div ng-show="user" class="ui pointing simple dropdown link item">
    <span class="text">Reg</span>
    <i  class="dropdown icon"></i>
    <div class="menu transition visible">
      <a class="item" href="/xyz">
        Schools
      </a>
      <div class="divider"></div>
      <a class="item" href="/xyz2">
       Admissions
      </a>
    </div>
  </div>

And in JS file ,you need to initialize like below

<script>
    $(document).ready(function () {
        $('.ui.dropdown').dropdown();
    })
</script>
Praveen Kumar
  • 1,966
  • 1
  • 9
  • 16