how to open sub menu in click on menu Item instead of hover

Question

I want to open this sub menu in button click not on hover

 <div id="container" style="width: 250px;">
        <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>C</a>

                <ul>
                    <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>

                        <ul>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">6</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">7</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">8</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">1F</a>

                        <ul>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>


jquery code

$('#filter-menu-button-menu').menu({
    "position": {
        collision: 'flipfit'
    }
});

every thing is working fine, but i want to open sub menu in click of menu Item instead of hover.

here is js fiddle link http://jsfiddle.net/apaul34208/tAH6a/17/

Thanks in advence

see updated fiddle jsfiddle.net/tAH6a/21

Nishit Maheta
– Nishit Maheta

2015-09-25 07:39:37 +00:00
Commented Sep 25, 2015 at 7:39 — Nishit Maheta
– Nishit Maheta, Commented Sep 25, 2015 at 7:39
thank a lot Nishit:)

AKG
– AKG

2015-09-25 07:42:25 +00:00
Commented Sep 25, 2015 at 7:42 — AKG
– AKG, Commented Sep 25, 2015 at 7:42
happy to help you :)

Nishit Maheta
– Nishit Maheta

2015-09-25 07:43:12 +00:00
Commented Sep 25, 2015 at 7:43 — Nishit Maheta
– Nishit Maheta, Commented Sep 25, 2015 at 7:43

Haselnussstrauch · Accepted Answer · 2015-09-25 07:43:18Z

1

Add

$('#filter-menu-button-menu').unbind('mouseenter mouseleave');

after

$('#filter-menu-button-menu').menu({
"position": {
    my: "right top",
    at: "left top",
    collision: 'flipfit'
}
});

look at this:

http://jsfiddle.net/tAH6a/22/

answered Sep 25, 2015 at 7:43

Haselnussstrauch

3532 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nishit Maheta · Accepted Answer · 2015-09-25 07:44:55Z

1

Use Below code . Unbind mouseenter mouseleave events.

DEMO

$('#filter-menu-button-menu').menu({
  "position": {
    my: "right top",
    at: "left top",
    collision: 'flipfit'
   }
 });

 $('#filter-menu-button-menu').unbind('mouseenter mouseleave');

answered Sep 25, 2015 at 7:44

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

1 Comment

AKG Over a year ago

hi nishit, could you check this fiddle here when we click on C menu then sub menu of C open and after that when we click on B then C's submenu close but b's sub menu does n't open ..how can we toggle this jsfiddle.net/tAH6a/23

Collectives™ on Stack Overflow

how to open sub menu in click on menu Item instead of hover

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related