Проблема с is(":visible")

[spo]

Не могу понять почему не срабатывает следующий код:

$("div.hctrl a").click(function() {
	if( $(this).closest("div.roll").find("div.hlist").is(':visible') ) $(this).closest("div.roll").find("div.hlist").css("visibility", "hidden");
	else $(this).closest("div.roll").find("div.hlist").css("visibility", "visible");
	return false;
});

Если поменять условие к примеру на проверку по классу, то все будет работать. Однако хочется обойтись минимальным кодом и не городить лишние addClass removeClass.

[рони]

spo,
а как выглядит хтмл остаётся загадкой

[spo]

Привожу весь код:

hidden();
function hidden() {$("div.hlist").css("visibility", "hidden");}
$("body").click(function() {hidden();});
	
$("div.hctrl a").click(function() {
	hidden();
	if( $(this).closest("div.roll").find("div.hlist").is(':visible') ) $(this).closest("div.roll").find("div.hlist").css("visibility", "hidden");
	else $(this).closest("div.roll").find("div.hlist").css("visibility", "visible");
	return false;
});
$("div.hlist a").click(function() {
	var new_a = $(this).attr("class"); var new_b = $(this).text();
	hidden();
	$(this).closest("div.roll").find("div.hctrl a").removeClass().addClass(new_a).text(new_b);
	$(this).closest("div.roll").find("input[type='hidden']").val(new_a);
	return false;
});

<div class="roll">
	<div class="hctrl">
		<a class="v-1" href="#" title="">1</a>
	</div>
	<div class="hlist">
		<div><a class="v-1" href="#" title="">1</a></div>
		<div><a class="v-2" href="#" title="">2</a></div>
		<div><a class="v-3" href="#" title="">3</a></div>
		<div><a class="v-4" href="#" title="">4</a></div>
	</div>
	<input type="hidden" value="v-1" />
</div>

[рони]

spo,
Элементы с css-свойством visibility равным hidden, а так же элементы с нулевой прозрачностью, считаются видимыми, поскольку они продолжают занимать место на странице.

$(this).closest("div.roll").find("div.hlist").is(' :visible') всегда будет true

[spo]

Вот оно что!
Тогда возникает вопрос, как правильно построить условие?

[рони]

spo,

$(this).closest("div.roll").find("div.hlist").css('visibility')!="hidden"

[spo]

Все получилось.
Большое спасибо, рони!

[danik.js]

Перепиши код так:

function hideLists() {
    $("div.hlist").css("visibility", "hidden");
}
hideLists();

$("body").click(hideLists);
     
$("div.hctrl a").click(function() {
    hideLists();
    var $list = $(this).closest("div.roll").find("div.hlist");
    var visibility = $list.css("visibility");
    $list.css("visibility", visibility == "visible" ? "hidden" : "visible");
    return false;
});
$("div.hlist a").click(function() {
    var new_a = $(this).attr("class"),
        new_b = $(this).text();
    hideLists();
    $(this).closest("div.roll").find("div.hctrl a").removeClass().addClass(new_a).text(new_b);
    $(this).closest("div.roll").find("input[type='hidden']").val(new_a);
    return false;
});

Вот только почему visibility? С display был бы куда проще.

[spo]

Спасибо, danik.js за усовершенствованный код!
Да с hide и show удобнее работать, но скрипт кастомного скроллбара, который я подключаю потом внутрь списков требует именно visibility.

[Deff]

Да с hide и show удобнее работать, но скрипт кастомного скроллбара, который я подключаю потом внутрь списков требует именно visibility.

тогда toggleClass