CODEWITHSUNDEEP
javascriptjqueryhtmldropdown
Leonardo Münch
Leonardo Münch

Reputation: 3

Span dropdown select Jquery

JavaScript

function myFunction() {
    if ($(".x-span-drop-menu").css("display", "none")) {
        $(".x-span-drop-menu").css("display", "block");
    } else {
        $(".x-span-drop-menu").css("display", "none");
    }
}

the dropdown menu drops down but it does not disappear again. that is because I write it to Jquery in Js it works

Upvotes: 0

Views: 264

Answers (4)

Andriy_K
Andriy_K

Reputation: 56

Will be better to toggle css-class like is-hidden with styles:

.is-hidden {
    display: none;
}

And as result you function will be: 

function toggleFunc() {
    $(".x-span-drop-menu").toggleClass('is-hidden');
}

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 128

Use toggle function to show and hide. Its simple

$(".x-span-drop-menu").toggle();

Upvotes: 0

Custodio
Custodio

Reputation: 8934

As you are using jQuery already, it may be simple to use a feature like toggle:

$( ".x-span-drop-menu" ).toggle( display );

is equivalent to:

if ( display === true ) {
  $( ".x-span-drop-menu" ).show();
} else if ( display === false ) {
  $( ".x-span-drop-menu" ).hide();
}

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Using $(".x-span-drop-menu").css("display", "none") in the if condition you are setting css property and the function will return a truthy value so true block is executed, which make element visible again.

function myFunction() {
    var span = $(".x-span-drop-menu");
    if (span.css("display") == "none") {
        span.css("display", "block");
    } else {
        span.css("display", "none");
    }
}

I will recommend to use :visible along with .is()

function myFunction() {
    var span = $(".x-span-drop-menu");
    if (span.is(":visible") == false) {
        span.css("display", "block");
    } else {
        span.css("display", "none");
    }
}

Upvotes: 0

Related Questions