Question

无法找到真正有效的解决方案，但我希望点击一下，div显示。现在这在我加载页面时有效，但是在第一次点击之后，我必须每次点击两次才能显示div。

有什么想法吗？

$(document).ready(function () {
    setMenu();    
});

function setMenu()
{
    var headerExtIsOpen = false;
    $('#headerExt').hide();

    $('#header').click(function () {
        if (!headerExtIsOpen) {
            $('#headerExt').show();
            headerExtIsOpen = true;
        } else {    
            $('#headerExt').hide();
            headerExtIsOpen = false;
        }
    });
}

Answer 1

无需记住状态，只需使用toggle（）

即可

$(function () {
    setMenu();    
});

function setMenu()
{
    $('#headerExt').hide();

    $('#header').on("click", function (e) {
        e.preventDefault();
        $('#headerExt').toggle();
    });
}

你说你想要切换其他东西。

最好的办法是切换一个类来改变颜色

$('#header').on("click", function (e) {
    e.preventDefault();
    $(this).toggleClass("open");
    $('#headerExt').toggle();
});

another way is to check the state

$('#header').on("click", function (e) {
    e.preventDefault();
    var child = $('#headerExt').toggle();
    var isOpen = child.is(":visibile");
    $(this).css("background-color" : isOpen ? "red" : "blue" );
});

如果布局类似

<div class="portlet">
   <h2><a href="#">Header</a></h2>
   <div>
      <p>Content</p>
   </div>
</div>

你可以拥有这样的CSS

.portlet h2 { background-color: yellow; }
.portlet > div { display: none; }
.portlet.open h2 { background-color: green; }
.portlet.open > div { display: block; }

和JavaScript

$(".portlet h2 a").on("click", function() {
    $(this).closest(".portlet").toggleClass("open");
});

还有布局可以让所涉及的JavaScript都为零。

Answer 2

事实证明我的.js文件中隐藏了一些脚本，当用户点击其他地方时会再次关闭菜单，我忘记了。

function resetMenu(e) {
    var container = $('#headerExt');

    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
    {
        $('#header').css("background-color", "inherit");
        container.hide();
        headerExtIsOpen = false;
    }
}

我忘了在此函数中关闭它后将headerExtIsOpen再次设置为false（上面的代码显示了修复）。现在它工作正常:)）

初始点击后，必须用Jquery点击两次（）

2 个答案: