Question

我有这段代码：

<ul class="col-xs-6 pull-right text-right kaup-select">
<li id="kaup-hidden">
    <span id="close-haup" class="haup-close-icon">
    </span>
    <p>
        <a href="#">Garden</a>
    </p>
    <p>
        <a href="#">News</a>
    </p>
    <p>
        <a href="#">Tools</a>
    </p>
</li>
<li id="kategorie-select">
    <a class="active-crumb haup-ico" href="#">Kategorie</a>
</li>

kaup-hidden元素是隐藏元素，点击＆＃34; kategoie-select＆＃34;显示这个隐藏层。

这是Javascript：

$('#kategorie-select').on('click', function () {
    if ($('#kaup-hidden').is(':hidden')) {
        $('#kaup-hidden').show();
    } else {
        $('#kaup-hidden').hide();
    }
});
$('#close-haup').on('click', function () {
    $('#kaup-hidden').hide();
});

// When hidden layer is shown, this code allows to close layer on every element click, but not on layer itself.
$(document).mouseup(function (e) {
    var container = $("#kaup-hidden");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

此代码工作正常，但当我点击＆＃34; kategorie-select＆＃34;时，我想关闭＆＃34; kaup-hidden＆＃34;如果它可见。但我不能。我认为，改变html的结构可以解决问题，但我无法改变HTML代码，所以我需要更改Javascript代码，但不知道如何。

我希望这个问题写得很好，我要感谢大家的帮助。

Answer 1

替换您的代码：

$('#kategorie-select').on('click', function () {
    if ($('#kaup-hidden').is(':hidden')) {
        $('#kaup-hidden').show();
    } else {
        $('#kaup-hidden').hide();
    }
});

与

$('#kategorie-select').on('click', function () {
        $('#kaup-hidden').toggle();
});

这一定对你有用。：）

Javascript - 显示和关闭元素问题

1 个答案: