Question

当我扩展分部时，它不能再次崩溃。我需要的只是当显示分区时我想在点击它时再次隐藏它。

这是我的HTML：

<div class="login_area" id="clickHere2">
    Signup

    <div class="drop-down" id="signup_area_hover">
        Signup
    </div>
</div>

<div class="login_area" id="clickHere">
    Login

    <div class="drop-down" id="login_area_hover">
        Login
    </div>
</div>

<div class="drop-down" id="dropdown_login">
    <div class="dropdown_login_header">
        <div class="beeper_value"></div>

        <div class="beeper_login"></div>
    </div>Hello World 111
</div>

<div class="drop-down" id="dropdown_signup">
    <div class="dropdown_signup_header">
        <div class="beeper_signup"></div>
    </div>Hello World 2222
</div>

这里是JS：

<script type="text/javascript">

   $( '#clickHere' ).click(function() {
     $( '#dropdown_login' ).slideToggle(500);
});

 $( '#clickHere2' ).click(function() {
     $( '#dropdown_signup' ).slideToggle(500);
});     

</script>

如果显示clickHere，我想添加if条件，ClickHere2隐藏，反之亦然。

Answer 1

查看jquery中的toggle / slideToggle函数。 http://api.jquery.com/toggle/和https://api.jquery.com/slideToggle/ 页面底部有一些示例。

Answer 2

DEMO

<强> jQuery的：

$( "#myBtn" ).click(function() {
     $( "#myDiv" ).toggle();
});

<强> HTML：

<div id="myDiv"></div>
<button type="button" id="myBtn">Toggle</button>

<强> CSS：

#myDiv {
    background-color:red;
    height:75px;
    width:75px;
}

<强>资源：

http://api.jquery.com/toggle/

切换/隐藏div JQuery

2 个答案: