Check if element has style and add or remove jquery

Question

I have like this HTML

<li class="megamenu-less">
    <a href="#" class="home-link sf-with-ul">Menu</a>
    <ul class="dropdown" style="display: none;">
        <li>1</li>
        <li>2</li>
    </ul>
</li>

When i hover on li.megamenu-less I just on .dropdown says display:block, that way my menu works on hover to show dropdown, but i need something else.

I need to that on click on .megamenu-less and then show dropdown, but the problem is that i have a lot of element in menu and i need only for that dropdown to change css, also i need to check if the menu is opened and and on click to say block or none based is it opened

I have used some sf-menu that work that way now i need to override it :(

you can use [`is(':visible')`](https://api.jquery.com/visible-selector/) and that will tell you if it is block or none or just use [`.toggle()`](http://api.jquery.com/toggle/) if you just want to make it the opposite state — Pete, Aug 17 '17 at 08:12
I am using some sf-fish menu, i can not to simple like that i need to make another function to override, — Miomir Dancevic, Aug 17 '17 at 08:13
Useful link: https://stackoverflow.com/questions/7312414/how-can-i-open-a-superfish-jquery-menu-on-click-rather-than-hover — PraveenKumar, Aug 17 '17 at 08:39
$(".megamenu-less").click(function () { if ($(this).find('.dropdown').css('display') == 'block') { $(this).find('.dropdown').css({ 'display': "none" }); } }); — Miomir Dancevic, Aug 17 '17 at 08:40

PraveenKumar · Answer 1 · 2017-08-17T08:47:46.123

I hope this helps you.

In order to open/show dropdown with a click you can:

disable (stopPropagation): mouseenter mouseout
show/hide menu on click

$("#yourmenu").superfish({
    delay: 100,
    animation: {
        opacity: 'show',
        height: 'show'
    },
    speed: 'normal',
    cssArrows: false
});
$('.sf-with-ul').on('mouseenter mouseout', function(e) {
    e.stopPropagation();
})
$('.sf-with-ul').on('click', function (e) {
    $(".dropdown").toggle(!$(".dropdown").is(':visible'));
})

Check if element has style and add or remove jquery

1 Answers1