跨度下拉列表选择Jquery

Question

的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");
    }
}

下拉菜单会下拉，但不会再次消失。 那是因为我在Js中将其写入到Jquery中

Answer 1

像使用样式is-hidden那样切换css类会更好：

.is-hidden {
    display: none;
}

结果，您的功能将是：

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

Answer 2

在if条件中使用$(".x-span-drop-menu").css("display", "none")来设置css属性，该函数将返回真实值，因此将执行true块，这将使元素再次可见。

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

我将建议使用:visible和.is()

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

Answer 3

因为您已经在使用jQuery，所以使用类似toggle的功能可能很简单：

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

等效于：

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

Answer 4

使用切换功能显示和隐藏。 这很简单

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